Question

我有$ scope.getmaindata列表，包含5个对象，在每个对象中，我有一个列表包含用户实现的多个值。 $ scope.myproviders包含具有id和级别名称的级别。我希望在id匹配时检查与该服务对应的每个用户的多个值。如果用户的列表中有3级，我必须在旁边显示输入框。我在stackoverflow中尝试了一些答案，但没有一个解决了我的问题。我得到代码的问题是当每个用户的levelqualified列表不在顺序中时，所以我想我必须写一个for循环写但不是成功了。这是一个有更多代码Plunkr v1的工作plunkr 的更新
这些值首次与$ scope变量绑定，但是当我取消选中其中一些 levelsqualified 时，每个用户的列表都没有更新
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>

Answer 1

我相信您需要更改ng-checked（如果我理解正确的话）。

<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>

您需要为输入框添加ng-if，如下所示：

<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>

我希望这就是你所需要的。

EDIT 我更改了Plunker以包含答案和一点点黑客攻击。我添加了ng-change事件并更改了您的ng-model。见下文：

<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>

我还添加了以下功能：

$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;
            }
        }
    }

}

如果这不是您需要的，请告诉我。你可能需要做一些调整。

Answer 2

延伸@Randi Radcliff的狙击手，this掠夺者可能会做到这一点。

在ng-checked上做了：

ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"

检查angularjs中嵌套ng-repeat的多个复选框

2 个答案: