如何在 angular 控制器中的 ng-repeat 中遍历 ng-models？

Question

我对网络开发还很陌生，正在尝试 angular 所以可能会有很多错误.. 基本上我在 ng-repeat 中有一个 ng-repeat，我需要在 child 中设置一个模型变量，在 parent 重复中单击复选框。我不知道如何从 parent 访问 child 中的模型。我试过给一个 [$index] 但它不起作用。

这是我的HTML。我有一个 parent 复选框，它应该更改 child 复选框 onclick 的点击布尔变量。

<li ng-repeat="set in wordlistSets" ng-controller="setController">

<div class="parentSelector">
<span class="selectorLeft">
    <p> blah </p>
</span>

<span class="selectorRight">
    <input type="checkbox" name="sets" ng-click="selectAll()">
</span>
</div>

<div  ng-repeat="wordlist in set.content"  ng-click="checked[parent.$index][$index] = !checked[parent.$index][$index]">
<span class="selectorLeft">
    <p>more blah</p><br>
    <p>extra blah</p>
</span>

<span class="selectorRight">
    <input type="checkbox" name="wordLists" ng-click="checked[parent.$index][$index] = !checked[parent.$index][$index]" ng-model="checked[parent.$index][$index]">

</span>
</div>

"SelectAll()" 函数应该遍历单词列表并相应地切换选中的变量。我不能使用 angulars ng-checked 因为我需要它来切换并且不具有与 parent 复选框相同的状态，因为它也可以通过点击 div 来设置本身。

这是控制器。

myApp.controller("setController", function MyController($scope) {
$scope.parentChecked = false;

$scope.selectAll = function() {
    for (var i = 0; i < $scope.set.content; i++) {
        if ($scope.parentChecked) {
            $scope.checked[$scope.index][i] = true;
        } else {
            $scope.checked[$scope.index][i] = false;
        }
    }
}

这里有一张图片供参考。单击粉色选择器或黑色 parent-selector 应勾选复选框。 Picture of page setup

在此先感谢您的帮助！ :D

Answer 1

我假设您需要 check-boxes 或 children 来独立工作，对吗？在这种情况下，最好的办法是保留一个 checkedWordlists 数组。

$scope.checkedWordlists = [];

$scope.toggleWordlist = function(wordlist) {
   var idx = $scope.checkedWordlists.indexOf(wordlist);
   if (idx>-1) {
      $scope.checkedWordlists.splice(idx);
   } else {
      $scope.checkedWordlists.push(wordlist);
   }
}

在您看来，

<div  ng-repeat="wordlist in set.content"  ng-click="toggleWordlist(wordlist)">
<span class="selectorLeft">
    <p>more blah</p><br>
    <p>extra blah</p>
</span>

<span class="selectorRight">
    <input type="checkbox" name="wordLists" 
           ng-click="toggleWordlist(wordlist)" 
           ng-checked="checkedWordlists.indexOf(wordlist)>-1">
</span>

最后，处理 parent 复选框：

$scope.toggleAll = function(wordlists) {
    var allToggled = $scope.allToggled()
    wordlists.forEach(function(wordlist) {
       if (allToggled == ($scope.checkedWordlists.indexOf(wordlist)>-1) {
           $scope.toggleWordlist(wordList);
       }
    })  
}
$scope.allToggled = function(wordlists) {
    var untoggledExist = wordlists.any(fucntion(wordlist) {
        return $scope.checkedWordlists.indexOf(wordlist) = -1
    });
    return !untoggledExist;
}

和 html:

<span class="selectorRight">
    <input type="checkbox" name="sets" 
              ng-click="toggleAll(set.content)"
              ng-checked="allToggled(set.content)">
</span>

这应该可以完成大部分工作。我还没有对此进行测试，但如果您想包含上面的数据集，我们可以创建一个 fiddle 以确保它有效。

希望这对您有所帮助

Answer 2

多亏了上面的评论，我在玩了一会儿之后才让它完美地工作。我 post 我的解决方案在这里：

一些注意事项。 array.splice 没有按照用户 posted 上面的方式工作，它应该采用两个变量：array.splice(index, numOfThingToRemove);如果只给出要删除的项目的索引，它将删除该项目以及数组中它之后的所有项目。

控制器代码如下：

$scope.parentChecked = false;
$scope.checkedWordlists = [];

$scope.selectAll = function(wordlists) {m
    //toggle parent
    if ($scope.parentChecked == false) {
        $scope.parentChecked = true;
    } else {
        $scope.parentChecked = false;
    }

    wordlists.forEach(function(wordlist) {
        $scope.setChild(wordlist, $scope.parentChecked);
    });
};

$scope.toggleCheckbox = function(wordlist) {
    var index = $scope.checkedWordlists.indexOf(wordlist);

    if (index > -1) {//is in array
        $scope.checkedWordlists.splice(index, 1);//remove from array
    } else {
        $scope.checkedWordlists.push(wordlist);//add to array
    }
};

$scope.setChild = function(wordlist, parentChecked) {
    var index = $scope.checkedWordlists.indexOf(wordlist);

    if (parentChecked && index <= -1) {//is not in array
        $scope.checkedWordlists.push(wordlist);//add to array
    } else if (!parentChecked && index > -1) {//is in array
        $scope.checkedWordlists.splice(index, 1);//remove from array
    }
};

和html：

<li ng-repeat="set in wordlistSets" ng-controller="setController">

<div class="parentSelector">
<span class="selectorLeft">
    <p> blah </p>
</span>

<span class="selectorRight">
    <input type="checkbox" name="sets" ng-click="selectAll(set.content)" ng-checked="parentChecked">
</span>
</div>

<div  ng-repeat="wordlist in set.content"  ng-click="toggleCheckbox(wordlist)">
<span class="selectorLeft">
    <p>more blah</p><br>
    <p>extra blah</p>
</span>

<span class="selectorRight">
    <input type="checkbox" name="wordLists"  ng-checked="checkedWordlists.indexOf(wordlist)> -1">

</span>
</div>

非常感谢大家的帮助！ :3

如何在 angular 控制器中的 ng-repeat 中遍历 ng-models？

How can you iterate through ng-models within an ng-repeat in an angular controller?

checkbox

controller

angularjs

ng-repeat

angular-ngmodel