Is there any way to bind anything you could have written on a form before bootstrapping an AngularJS application?
For example, in this form (also executable in https://jsbin.com/womuyi). How could bind to the controller the data I've written on the input before clicking the bootstrap button?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular Bootstrap Call Example">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl as vm">
Please type something before bootstrapping AngularJS
<form>
<input type="text" ng-model="vm.sth"><br/>
You wrote {{ vm.sth }}
</form>
<button onclick="doBootstrap()">Bootsrap AngularJS</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script>
angular
.module('main', [])
.controller('MainCtrl', function(){
var vm = this;
// How to bind what I wrote on the input after bootstrap??
});
function doBootstrap() {
angular.bootstrap(document, ['main']);
document.querySelector('button').disabled = 'disabled'
}
</script>
</body>
</html>
Quite ugly, but you can use document to store the values (or any other object that you want) to wait until your app is bootstrapped.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular Bootstrap Call Example">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl as vm">
Please type something before bootstrapping AngularJS
<form>
<input id="sthInput" type="text" ng-model="vm.sth"><br/>
You wrote {{ vm.sth }}
</form>
<button onclick="doBootstrap()">Bootsrap AngularJS</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script>
angular
.module('main', [])
.controller('MainCtrl', function(){
var vm = this;
vm.sth = document.myBootstrap.sth;
});
function doBootstrap() {
var sthValue = document.querySelector("#sthInput");
document.myBootstrap = {
sth: sthValue.value
};
angular.bootstrap(document, ['main']);
}
</script>
</body>
</html>
Use ng-app directive before controller as below:
<body ng-app="main" ng-controller="MainCtrl as vm">
This will automatically do the bootstrapping for you.
The official documentation for the same can be found at https://docs.angularjs.org/api/ng/directive/ngApp.
you just save value of text box before bootstrap Angular App:-
`beforeData = (document.querySelectorAll(".beforeBootstrap")[0]).value;
angular.bootstrap(document, ['myApp']);
$event.target.disabled = 'disabled';`
see this plunker
I would approach this by doing something along the lines of processing input data before Bootstrap like #elecash suggested, but I would add it to a constant.
(function() {
'use strict';
window.doBootstrap = function() {
window.values = {};
var inputs = document.querySelectorAll('input'),
input;
for (var i = 0; i < inputs.length; i += 1) {
input = inputs[i];
window.values[input.getAttribute('ng-model')] = input.value;
}
angular.bootstrap(document, ['main']);
}
}());
Then in your Angular code:
angular
.module('main', [])
.controller('MainCtrl', ['preBootstrap', function(preBootstrap){
var vm = this;
angular.forEach(preBootstrap, function(value, key) {
var modifiedKey = key.replace('vm.', '');
this[modifiedKey] = value;
}, vm);
}])
.constant('preBootstrap', window.values);
Related
I am learning AngularJS and trying to understand the $scope part, I was trying to do string combine by creating three variables(ng-model) and see how javascript works with angularJS. Say if I insist on creating three of the ng-model, how do I combine the two strings and put them together in the rstString? I tried to read the $scope elements and the data is there, so what did I miss? Thank you.
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.rstString = $scope.firstString +$scope.secondString;
});
</script>
</body>
</html>
I added a button in your example :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString = 'hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
You can do like this too :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString"/><br><br>
Second String: <input ng-model="secondString"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstString = 'hello ';
$scope.secondString = ' world ';
$scope.rstString = 'aaa';
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
you can use ng-change event
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '" ng-change="handleChange()"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'" ng-change="handleChange()"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.handleChange = () => {
$scope.rstString = $scope.firstString +$scope.secondString;
};
});
</script>
</body>
I have just a problem rightly ask a question).
I created angularJS app 'myApp'. And app get list of two groups. And app should to represent on browser two checkboxes: first - checked, second - empty.
But maybe I didn't count the order of action of building of angular's directives.
This is example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<div ng-repeat="group in groups">
<mygroups info='group'></mygroups>
</div>
</div>
<script type="text/javascript">
var groups = [
{
"id":"769", "spam_status":"checked"},
{
"id":"1262", "spam_status":""}
];
var app = angular.module("myApp", []);
app.controller("MainController", function($scope){
$scope.groups = groups;
});
app.directive("mygroups", function(){
return{
scope: {info: "="},
template: "<input type='checkbox' id='{{group.id}}'> {{info.id}}",
//WORK FOR FIRST CHECKBOX IF TYPE: //BUT IT IS NO SENSE//
// template: "<input type='checkbox' id='769'> {{info.id}}",
controller: function(){
for (var i = 0; i < groups.length; i++){
$('#' + groups[i].id).attr(groups[i].spam_status,'');
}
}
};
});
</script>
</body>
</html>
I get a right 'id' of element on front-end when I inspected code on browser. If I put on template number '769' instead {{info.id}}, the first checkbox will checked.
But I think that controller of directive acts before assignment 'id' of elements.
But I need realize this by that method. Because I try to explain on scratches the situation which I don't understand.
Thanks a lot.
Two issues :
First point
Your template is :
<input type='checkbox' id='{{group.id}}'> {{info.id}}
It should be :
<input type='checkbox' id='{{info.id}}'> {{info.id}}
Second point
You must call your dom modification in a $timeout function. On the first execution of your controller, your html does not exists yet.
$timeout will trigger the code at the next digest. So, your html will exists.
Of course, do not modify your html in your controller (even in a directive). The link function is the place to modify the html.
Corrected snippet
Here is the snippet with the correction. There is a jquery error, I didn't watch what it is. Do not hesitate to edit to throw it away.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<div ng-repeat="group in groups">
<mygroups info='group'></mygroups>
</div>
</div>
<script type="text/javascript">
var groups = [
{
"id":"769", "spam_status":"checked"},
{
"id":"1262", "spam_status":""}
];
var app = angular.module("myApp", []);
app.controller("MainController", function($scope){
$scope.groups = groups;
});
app.directive("mygroups", function(){
return{
scope: {info: "="},
template: "<input type='checkbox' id='{{info.id}}'> {{info.id}}",
//WORK FOR FIRST CHECKBOX IF TYPE: //BUT IT IS NO SENSE//
// template: "<input type='checkbox' id='769'> {{info.id}}",
controller: function($timeout){
$timeout(function() {
for (var i = 0; i < groups.length; i++){
$('#' + groups[i].id).attr(groups[i].spam_status,'');
}
});
}
};
});
</script>
</body>
</html>
Looks like you want to hook the checkbox up
template: "<input type='checkbox' ng-model='info.spam_status' ng-true-value='\'checked\'' id='{{group.id}}'> {{info.id}}"
I want to save the current state of check box and reload it when open the page next time.
AngularJS:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
var init = function () {
$scope.check = $window.localStorage.getItem("app3");
};
init();
$scope.Save = function () {
$window.localStorage.setItem("app3", $scope.check);
}
});
HTML:
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular-1.4.9.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input id="check1" type="checkbox" ng-model="check" />
<input type="button" value="Save" ng-click="Save()" />
</div>
</body>
</html>
Dont use jquery with angular.
Attach a ng-model to your input box like so : and you can access the value of the input in your controller using $scope.check
your local storage setting will be like so :
$window.localStorage.setItem('app3',$scope.check);
Thats it! Kindly go through angular tutorials or their documentation to understand how angular works.
Can anyone tell me how can I do that please?
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form.one" ng-submit="submitForm()">
<input ng-model="name">
<input type="submit">
</form>
<p>Hello {{name}}!</p>
</body>
And my app.js is
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {
var data = form.one.name;
};
});
How can I save input to the data variable? Is it possible to save on keypress?
To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):
<body ng-controller="MainCtrl">
<form novalidate>
<input ng-model="name">
<!-- The method for submitting the data goes on the button. -->
<!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
<input type="submit" ng-click="submitForm(name)" value="Click me!">
</form>
<p>Hello {{name}}!</p>
<!-- This bit of code is to display the results of adding names to the array in the browser window: -->
<pre>{{ data }}</pre>
</body>
Here's the Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
// I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
$scope.data = [];
// Now, whenever the button is clicked, this method is run.
// It then stores the name in the 'data' array defined above.
$scope.submitForm = function(name) {
$scope.data.push(name);
};
});
Try this for it to show straight after typing:
<body ng-controller="myApp">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('myApp', function ($scope) {
$scope.name = $scope.name;
console.log($scope.name)
});
Small little JSFiddle for this:
https://jsfiddle.net/joshdmiller/HB7LU/
I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.
do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?
Similar to this thread:
Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?
I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().
Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
document.getElementById("id123").select();
}
</script>
</body>
</html>
Here is the code I have so far,:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" id="txt1"/>
<button ng-click="selectOnClick()">Select Txt</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
</script>
<script type="text/javascript">
var mod1 = angular.module('demo', []);
mod1.controller('DemoCtrl', function ($scope) {
$scope.content = 'some text';
});
mod1.directive('selectOnClick', function () {
// Linker function
var element1 = angular.element("txt1");
element1.select();
});
</script>
</body>
</html>
http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview
Simple way to do is using click event.
for example
<input type = "text" (click) = "$event.target.select()">
Can you try this:
http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" select-on-click />
<p>Content: {{content}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app:
(function (angular) {
var module = angular.module('demo', []);
module.controller('DemoCtrl', function ($scope) {
$scope.content = 'foobar';
});
module.directive('selectOnClick', function () {
// Linker function
return function (scope, element, attrs) {
element.bind('click', function () {
this.select();
});
};
});
}(angular));
you just need to move the select-on-click to a button