简体   繁体   中英

Check multiple checkbox of nested ng-repeat in angularjs

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM