<div ng-repeat="data in assets">
<input type="checkbox" ng-model="text"+{{$index}}/>
</div>
here I want to generate different ng-models for each checkbox
You can use alias name "data" and assign "data.isChecked" to ng-model.
<div ng-repeat="data in assets">
<input type="checkbox" ng-model="data.isChecked" />
</div>
This will add that "isChecked" variables at run time to all objects of "assets" array.
It's better to have your models in the array you are looping over.
<div ng-repeat="data in assets">
<input type="checkbox" ng-model="data.input"/>
</div>
Related
I have a nested ng-repeat with ng-if, inside each ng-if I have a check-box which is containing a ng-click function. I want to pass the nested ng-repeat's $index value through the function.
Here is my code.
<div class="student" ng-repeat="student in studentDetails.childNumber track by $index" ng-init=" studentnumber = $index">
<div ng-repeat="grmnt in student.garmentNumber track by $index" ng-init="grmntidex = $index" ng-if="grmnt.gurmentType === 'shirt'">
<div ng-click="garmentOpen = !garmentOpen;" class="z-depth-1 garmentelement">Garment</div>
<div class="garmentHeader" ng-if="garmentOpen">
<div class="garmentBody">
<div class="row">
<p class="col s6 center-align">
<input type="checkbox" id="BrandMeasurement" ng-click="msrmntSelector(grmnt)" />
<label for="BrandMeasurement">Brand Measurement</label>
</p>
<p class="col s4 center-align">
<input type="checkbox" id="BodyMeasurement" ng-click="msrmntSelector(grmnt)" />
<label for="BodyMeasurement">Body Measurement</label>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
But the problem is when I am selecting the last grmnt element it's passing proper garment with id but after selecting the first element its not passing 2nd or 3rd or 4th any of the garment. In every case it's passing only the first element.
Can any one please tell me where I'm making any mistake (if any)??
Don't use ng-if on the ng-repeat just use a filter in the ng-repeat.
<div ng-repeat="grmnt in student.garmentNumber | filter:{gurmentType: 'shirt'} track by $index" ng-init="grmntidex = $index">
Edit: I think maybe the problem is in your labels. The label's for attribute needs to uniquely match the input's id attribute. Each row needs its own id/for pair. Use $index to do this.
<input type="checkbox" id="BrandMeasurement{{$index}}" ng-click="msrmntSelector(grmnt)" />
<label for="BrandMeasurement{{$index}}">Brand Measurement</label>
How can ng-click be assigned to the $first element in ng-repeat? In the below code doSomething() should be called only when the first input is clicked. The remaining inputs shouldn't have ng-click handlers assigned. I've found examples of how to use $first with ng-class or ng-show but not with ng-click.
<div ng-repeat="item in items">
<input type="checkbox" ng-click="doSomething()"/>{{item.name}}
</div>
Try this:
<input type="checkbox" ng-click="$first && doSomething()"/>{{item.name}}
working examlpe: http://jsfiddle.net/wLrYc/
You could also use ngSwitch which avoids creating all the handlers which you mention in your comment to the accepted answer:
<div ng-repeat="item in items" ng-switch on='$first'>
<input type="checkbox" ng-switch-when='true' ng-click="doSomething()"/>
<input type="checkbox" ng-switch-when='false'/>
{{item.name}}
</div>
Semi-ugly solution: send $first as argument to doSomething()
<div ng-repeat="item in items">
<input type="checkbox" ng-click="doSomething($first)"/>{{item.name}}
</div>
and then have $scope.doSomething(actuallyDoSomething) only do it's thing if actuallyDoSomething is true.
I am unable to set the checked attribute using an ng-repeat as shown below:
<div ng-repeat="thing in things">
<input type="checkbox" {{thing.is_it_checked}}>
<div>{{thing.is_it_checked}}</div> // shows either "checked" or ""
</div>
I tried with without the "{{}}", but it still didn't work. What am I doing wrong?
Like this:
<div ng-repeat="thing in things">
<input type="checkbox" ng-checked="thing.is_it_checked">
<div>{{thing.is_it_checked}}</div>
</div>
ngChecked
ng-checked is used for that purpose.
Try <input type="checkbox" ng-checked="thing.is_it_checked != ''">.
I am having some trouble with using AngularJS ng-repeat. Here is what I have:
<div ng:show="selected == 3">
<div class="columns">
<textarea rows="4" data-ng-model="modal.data.answer[1].text" cols="91">1</textarea>
</div>
<div class="columns">
<label>Explanation</label>
<textarea rows="2" data-ng-model="modal.data.answer[1].explanation" cols="91"></textarea>
</div>
<div class="columns">
<div class="colx2-left">
<span class="label">Correct</span>
<input type="checkbox" data-ng-model="modal.data.answer[1].correct" class="check-box"><input type="hidden" value="false" name="Details[0].Correct">
</div>
<div class="colx2-right">
<label>Image File</label>
<input type="text" data-ng-model="modal.data.answer[1]image" class="full-width">
</div>
</div>
</div>
The modal.data.answer array will always have six elements. Can I use ng-repeat to create the HTML for these and have it repeat even the [x] numbers in the array and have it increment the number on the first line for "selected =" from 3 to 8 ?
As far as I know I can use <div ng-repeat="t in [3,4,5,6,7,8]"> </div> but how can I get the values of t into things like:
data-ng-model="modal.data.answer[1].text"
your edit is heading in the right way, you can iterate through a list of integers easily, the you just use the value of you index like that
<div ng-repeat="t in [3,4,5,6,7,8]">
....
data-ng-model="modal.data.answer[t].text"
...
I made a fiddle if you want to try http://jsfiddle.net/DotDotDot/tweyS/ (the input field is just here to change the selected value, as in your code sample, in order to display the right fields)
have fun
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}
</div>
ng-repeat's each item get its own scope, but how to get the input value?
In a normal situation, just set a ng-model and refer it through $scope.
<div ng-repeat="item in items">
<input type="text">
</div>
Is thre a way to work around this?
<div ng-repeat="item in items">
<input type="text" ng-model="item.value">
</div>