I have $scope.getmaindata list with 5 objects, in each object i have a list contain multiple values which user achieved. And $scope.myproviders contain levels with id and level name. I want to check the multiple values of each user corresponded to that service when id matches. and if user have level 3 in his list i have to show the input box next to it. I tried some answers in stackoverflow but none of them solved my issue.The problem i am getting with code is when the levelsqualified list of the each user is not in the order, so i thought i have to write a for loop and wrote but not succeeded. Here is the working plunkr with more code Plunkr v1
Update
The values are binding for the first time with $scope variables but when i uncheck some of them levelsqualified list of each user is not updated
Plunkr v2
<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata">
<ul class="list-inline">
<h4>{{mydata.firstname}}</h4>
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]==providers.level">
{{providers.level}}
</label>
</span>
</li>
<li>
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
</ul>
</div>
I believe you need to change your ng-checked (if I am understanding you correctly).
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]">
{{providers.level}}
</label>
and you need to add an ng-if
for your input box like so:
<li ng-if="mydata.levelsqualified[$index]==3">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I hope this is what you needed.
EDIT I changed the Plunker to incorporate both answers and a little hacking. I added an ng-change event and changed your
ng-model
. See Below:
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1">
{{providers.level}}
</label>
</span>
</li>
<li ng-if="mydata.levelsqualified.indexOf(3) > -1">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I also added the following function:
$scope.addCheckChoice = function (c, p) {
var main = $scope.getmaindata.indexOf(c);
var idx = c.levelsqualified.indexOf(p.id);
if (c.selected === true) {
c.levelsqualified.push(p.id);
alert("You selected " + p.id + " for " + c.firstname);
}
else {
c.levelsqualified.splice(idx, 1);
alert("You removed " + p.id + " for " + c.firstname)
}
for (var i = 0; i < c.levelsqualified.length; i++) {
for(var x = 0; x < $scope.myproviders.length; x++){
if (c.levelsqualified[i] == $scope.myproviders[x].id) {
c.selected = true;
}
}
}
}
If this isn't what you need, let me know. You may need to do a little tweaking.
Extending on @Randi Radcliff's plunker, this plunker might do the trick.
On the ng-checked just did:
ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.