Is it possible to change ng-model value without ng-change function??
The following method is not work
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field">
<div> {{field}} </div>
</div></div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('MyCtrl', function($scope){
if(document.getElementById("checkbox").checked){
$scope.field="YES";
}})
but use the following code is work for me
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field" ng-change="change_text()">
<div>{{field}}</div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('MyCtrl', function($scope){
$scope.change_text = function() {
$scope.field="YES";
}})
</script>
To accomplish what you are trying to do, you can use ng-true-value and ng-false-value to have your model be a type other than a boolean without breaking the two way data binding with ng-model.
for example:
<input id="checkbox" type="checkbox" ng-model="field" ng-true-value="'YES'" ng-false-value="'NO'">
{{field}}
Pass the values for ng-true-value and ng-false-value as string literals (wrapped in the extra quotes).
http://plnkr.co/edit/hjuwOV6q6iZOaXv89M6x?p=preview
Related
So I managed to generate and import an html code like
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
and I obtained a String array containing the ng-models of all such inputs in an array from a $http.post request like
$scope.ngmods=['text1','text2']
how do I get the values of the inputs by manipulating the array elements?
Here is what I have tried :
{{ {{ngmods[0]}} }}
like i tried to get the value of in the array element and then again enclosed it in the {{ }} hoping the results would be the same as {{text1}}
use $parse to evaluate the expression against scope.
create a custom filter with $parse to get the scope value from a string
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
in the html pass the current scope this from the html to filter
{{ngmods[0] | parserFil : this}}
angular.module("app",[])
.controller("ctrl",function($scope,$parse){
$scope.ngmods=['text1','text2'];
})
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
{{ngmods[0] | parserFil : this}}
</div>
angular.module('todoApp', [])
.controller('TodoListController', ["$scope",
function($scope) {
$scope.setValue = setValue;
function setValue() {
var list = [];
list.push($scope.text1);
list.push($scope.text2);
$scope.ngmods = list;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp">
<div ng-controller = "TodoListController">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2" ng-blur="setValue();">
<span>{{ngmods[0]}}</span>
</div>
</div>
Use ng-repeat & make sure html in under ng-controller
Example
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>enter code here
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Amar",
"Mhatre"
]
});
</script>
</body>
</html>
I can use the below code snippets to update the value of one textarea with another simultanoeusly
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input id="id1" type="text">
<input id="id2" type="text">
</div>
</div>
Script file:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){
$scope.text1 = '';
}]);
Is there a way I can use the ID to update the value simultanously instead of the ng-model property. Thank you!!!
You can try to use $watch:
$scope.$watch('text1', function () {
document.getElementById('id2').value = $scope.text1;
});
I want to make a Kendo grid with 4 tabstrips, 4 children grids, 5 controllers, first is parent, others are children. Here is a part of code, with one parent and one child controller. Problem is that all the time I got an error "Argument '' is not a function, got undefined" Where should I define it? Everything is stored locally so the preview is not possible
Check this out:
http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html
You don't nest the controllers in your javascript. This is from that link:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
Instead, you nest the controllers in your markup. I don't see where you are binding the controllers in your markup, btw.
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
This is all from that link I provided.
I have an Array in my controller. On the basis of that Array I'm generating Input fields On my page.
My AngularJs code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.names = ['morpheus', 'neo', 'trinity'];
});
And on page I'm generating my input fields
<form name="myForm1" ng-controller="MainCtrl">
<div ng-repeat="gg in names">
<input type="text" ng-model="control[index]"/>
</div>
<input type="submit" value="submit"/>
</form>
Now it generating ng-model for each textbox are control[index]
but I want to generate ng-model for each textbox like
control[0]
control[1]
control[2]
Plunker
you have to use
<input type="text" ng-model="control[$index]"/>
and there is no scope variable called control so you need to define the scope variable also, as below
$scope.control = {};
here is the updated Plunker
I am building radio buttons dynamically. ng-change='newValue(value) stops being called after each radio button has been pressed once.
this works: Clicking on the radio buttons changes the value to foo/bar/baz.
http://jsfiddle.net/ZPcSe/19/
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>
<hr>
{{value}}
</div>
this code does not: The {{value}} - "label" is not updated once each radio button has been pressed at least once. Aparently ng-change is not fired any more.
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>
</span>
{{value}}
</div>
http://jsfiddle.net/ZPcSe/18/
The Controlles is the same each time:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = '-';
$scope.newValue = function(value) {
$scope.value = value;
}
}
Thanks for your help.
ngRepeat creates new scope, so trying to set value sets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected:
HTML:
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = {
value: '-'
};
$scope.newValue = function(value) {
// $scope.options.value = value; // not needed, unless you want to do more work on a change
}
}
You can check out a working fiddle of this workaround. See angular/angular.js#1100 on GitHub for more information.
Just a quick work-around, we can achieve the same- using ng-model="$parent.value", because it would refer to the parent of ng-repeat scope i.e- in myCtrl scope
Only Change in ng-model-
<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>
Here is the fiddle
Try ng-click instead of ng-change.