i want to set the checkbox true or false dynamically , but while passing the data from controller to ng-model the checkbox status is not changing.
code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model={{applicable_status}}>
<label>Applicable</label>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.applicable_status = "true";
});
</script>
</body>
</html>
use ng-init directive to initialize application data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<input type="checkbox" ng-model=applicable_status>
<label>Applicable</label>
<pre ng-bind="applicable_status | json"></pre>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.init = function(){
$scope.applicable_status = true;
};
});
</script>
</body>
</html>
There is no need to use ng-init in your code.
You just need to remove those double quotes from "true" just assign normal true value to your variable, and it will work perfectly
Change your code from:
$scope.applicable_status = "true";
To
$scope.applicable_status = true;
It will work fine!
Check this JsBin
Related
i dont want to load controller when page is load.i want to load it after click the button.
Here is my code, help me!!
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button onclick="myfunc()"></button>
Name: <input ng-model="name">
</div>
<script>
function myfunc(){
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
}
</script>
<p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>
</body>
</html>
Instead of using onclick to load a controller, use the ng-click directive to invoke a function that loads the ng-model.
angular.module("myApp",[])
.controller('myCtrl', function($scope) {
$scope.myfunc = function() {
$scope.name = "John Doe";
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myfunc()">Load</button>
Name: <input ng-model="name">
<br>name={{name}}
</body>
I am learning how to use angularjs and just need a good place to start. I tried to write this simple app but cant get it working, so can someone help me fix it, and help point me in the right direction.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck">
<h1>{{palcheck}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var str = $scope.palcheck
$scope.check = str === str.split('').reverse().join('');
ng-if="palcheck"
});
</script>
</body>
</html>
I would add a change listener to the input, and then set the value of it is is a match in that listener.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck" ng-change="onChange()">
<h1>{{palcheck}}</h1>
<h1>Is Match: {{isMatch}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.onChange = function(){
$scope.isMatch = str === str.split('').reverse().join('');
};
});
</script>
</body>
</html>
I'm a beginner, I have a simple Angular JS that's not working, I don't understand why, here is my code (the two files index.html & script.js are in the same folder):
index.html :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
script.js :
var MainController = function($scope) {
$scope.message = "Hello";
};
The ng-model is working, the name that I write in the textbox gets displayed, but I get {{message}} instead of the actual message Hello that I have in the scope of the controller.
Thank you in advance.
Name your app
<body ng-app="myApp">
Create an app.js
var app = angular.module("myApp", []);
Rename script.js to MainController.js , (Don't have to, but for a clean development)
app.controller('MainController', ['$scope', function($scope) {
$scope.message = "Hello";
}]);
I have an application where a part of the page is implemented in angular js. I have a requirement where I have to reload the angular js template coming from the server, based on some user action. I have simulated the exact situation with a dummy code,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript">
var angApp = angular.module("app", []);
angApp.controller("mainCtrl", function($scope){
$scope.p1 = "Hello1";
$scope.p2 = "Hello2";
})
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
function add(){
var tpl = "<div>{{p1}}</div><div>{{p2}}</div>";
$("#container").html("");
$("#container").html(tpl);
angular.element(document).injector().invoke(function($compile){
var obj=$('#angApp');
var scope = angular.element($("#angApp")).scope();
$compile(obj.contents())(scope);
scope.$digest();
});
var angControllerScope = angular.element($("#angApp")).scope();
angControllerScope.$apply(function() {
angControllerScope.p1 = "New Hello";
});
}
</script>
<body>
<button type="button" onclick="add()">Add</button>
<div id="angApp" ng-controller="mainCtrl">
<div id="container">
<div>{{p1}}</div>
<div>{{p2}}</div>
</div>
</div>
</body>
On click of Add button how to get the value as "Hello" again.
Thanks.
Sorry if i have misunderstood what you mean but this is what i think you are trying to achieve...
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.p1 = 'Hello';
$scope.add = function() {
$scope.p1 = 'New Hello'
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<button type="button" ng-click="add()">Add</button>
{{p1}}
</div>
</body>
</html>
Found the solution. I had to recompile the template so that the binding with controller again works fine. Below link was useful.
https://gist.github.com/umidjons/1fb8ae674df4c71f85cf
I have updated the initial code with the working version.
I know how to react to user input in a textarea with ng-change in AngularJS. But how can I get the current input inside the Angular controller? I am missing something like $(this).value(); in jQuery.
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function() {
console.log("How do I get the current content of the field?");
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
ng-model
It'll store the value of an input, textarea, or select.
Your html should be like this:
<div ng-controller="ExampleController">
<textarea ng-model="myValue" ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
Then in your controller you can reference that with $scope.myValue
Hope that helps! :)
You can make use of $event for getting value of current element. Something like this
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function(obj,$event) {
var currentElement = $event.target;
console.log(currentElement.value);//this will give you value of current element
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange(this)" id="ng-change-example1"></textarea>
</div>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function(vals) {
console.log(vals);
$("#result").html(vals);
};
}]);
body{
background:#ffc10721;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl" align="center">
<p>Write something in the Textarea</p>
<textarea ng-change="myFunc(myValue)" ng-model="myValue"></textarea>
<br>Result :<p id="result"></p>
</div>
</body>
</html>