i try to write a simple code on view like
<input type="radio" ng-model="optJawab" ng-value="'blabla'" id="blabla"><label for="blabla">blabla</label>
and i succeeded to retrieve at console
console.log(this.optJawab);
and i facing problem with ng-repeat, console on controller said undefined?
code like below.
<div class="divTable" ng-repeat="quest in Questions track by $index">
<input type="radio" ng-model="optJawab[$index]" ng-value="'blabla'" id="blabla">
<label for="blabla">blabla</label>
</div>
change like this,
console.log($scope.optJawab);
Related
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
I would like to iterate over an array in AngularJS like this:
var languages = ['en', 'es', 'fr'];
To generate something like this:
<input type="text" ng-model="mymodel.en" placeholder="Name (EN)">
<input type="text" ng-model="mymodel.es" placeholder="Name (ES)">
<input type="text" ng-model="mymodel.fr" placeholder="Name (FR)">
I have tried this:
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel.{{language}}" placeholder="Name ({{language | uppercase}})">
</div>
But throws an error:
"Syntax Error: Token '{' is an unexpected token at column ..."
How should I perform this loop?
Use mymodel[language] instead of mymodel.{{language}}
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel[language]" placeholder="Name ({{language | uppercase}})">
</div>
plnkr
See the plnkr, and start typing in any of the input fields to see the model changes.
you cantry something like this,
<input type="text" ng-model="mymodel[language]" ...
You shouldn't use {{}} notation inside ng-model here you can refer to your property in the mymodel object.
But it seems that you are trying to get binding via model somehow for your inputs. It's not gonna work in your case because you need to init mg-model directives.
For catching changed in your model from dynamically generated you need to compile used directives using $compile service.
Here you can check out sample. I googled it but I've solved similar problem in similar way.
I have a form that generates some fields using ng-repeat. I want to attach each independent field to set validity in case it is left empty. Is there a way to do this?
Thanks!
You need to use ng-form with your ng-repeat. I'd update your example, but you didn't give me one... so the idea is something like this:
<form name="myForm">
<div ng-repeat="item in items" ng-form="repeatForm">
<input type="text" name="foo" ng-model="item.foo" required/>
<span ng-show="repeatForm.foo.$error.required">required</span>
</div>
</form>
If you needed to access 'setValidity' on the model for some reason, you'd probably have to pass repeatForm.foo to a function either on your controller or on your scope. like ng-click="myWeirdValidationFunction(repeatForm.foo)". There's probably not much of a use case for this though.
The problem I'm facing, as outlined in the code, is that I can't seem to find out how to bind the second checkboxes (created with ng-repeat) to some model which I would then be able to use further down the code (showing/hiding yet another set of options). Also, I managed to show the additional number of inputs based on the count parameter in the $scope.availableOptions by using the $scope.getItterator function, but now I don't see how would I access the values of these checkboxes? I know I have to somehow use the option "ng-model" but am failing to do so, so any help appreciated.
My code is here, but am showing it here too:
html:
<div ng-controller='MyCtrl'>
Show additional options <input type="checkbox" ng-model="additionalOptions">
<div ng-show="additionalOptions">
<ul>
<li ng-repeat="option in availableOptions">
<label class="checkbox" for="opt_{{option.id}}">
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" />
{{option.name}}
<ul ng-show="if the upper checkbox is clicked">
<li>
<input type="text" ng-repeat="i in getItterator(option.count)" ng-model="SOME_VALUE_TO_BE_USED_BELOW"/>
Output the value based on what's entered above in the textboxes (SOME_VALUE_TO_BE_USED_BELOW)
</li>
</ul>
</label>
</li>
</ul>
</div>
</div>
and my js:
function MyCtrl($scope) {
$scope.availableOptions = [{"id":"1","name":"easy","count":"2"},{"id":"2","name":"medium","count":"3"},{"id":"3","name":"hard","count":"2"}];
$scope.getItterator=function(n){
var a = new Array();
for(var i=1; i <= n; i++)
a.push(i);
return a;
};
}
Try ng-model="option.checked":
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.checked"/>
And then you can access this property further below like this:
<ul ng-show="option.checked">
DEMO
If you need to also reference the text box inputs. You create a new property (values) on the option. Like this:
{"id":"1","name":"easy","count":"2",values:[]}
Html:
<div ng-repeat="i in getItterator(option.count)">
<input type="text" ng-model="option.values[$index]"/>
{{option.values[$index]}}
</div>
DEMO
Use this:
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.clicked"/>
{{option.name}}
<ul ng-show="option.clicked">
Basically, you are saying that the top checkbox should store its value in a model for each option option.clicked. And then only showing the information based on the scope item.
Updated Fiddle:
http://jsfiddle.net/CkHhJ/26/
UPDATE:
Here is another updated fiddle to answer your questions second part: http://jsfiddle.net/CkHhJ/27/
The difficulties you were having is likely because you are trying to build dynamic input models. Just bear in mind that you need to use an object for the dynamic values (not a plain string, eg: option.answers[$index].value and not just option.answers[$index]. See: AngularJS: Updating an input with a dynamic ng-model blurs on each key press
My task is: group of checkboxes must be checked(all), if checkbox-parent has been checked. Sure, using Angular. OK, what am I doing:
My parent checkbox is gettring the ng-model directive:
<input type="checkbox" ng-model="checked" ng-true-value="checked" ng-false-value="" id=""/> {{filterValue.title}}
Sub-checkboxes are getting the next:
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}}
Trying: no check in the last case, however {{checked}} calculates successfully out of the <checkbox>.
What am I doing wrong ?
UPD:
Sub-checkboxes are created by this:
<ul id="id" class="groupList">
<li ng-repeat="subNodeValue in filterValue.subNodesValues">
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}} {{checked}}
</li>
</ul>
Use the ngChecked directive instead of doing it that way (http://docs.angularjs.org/api/ng.directive:ngChecked). They have a master/slave checkbox example on there too
You can't use {{}} alone inside an element. Use ng-checked=checked instead.
Here is a working plunker: http://plnkr.co/edit/vBftwH4MwkeSiC90AltU?p=preview