Question

我是网络开发人员的新手并尝试使用角度，因此可能会出现很多错误。基本上我在ng-repeat中有一个ng-repeat，我需要在子重复中设置一个模型变量，在父重复中单击一个复选框。我不知道如何从父母那里访问孩子的模特。我试过给[$ index]，但它不起作用。

这是我的HTML。我有一个父复选框，它应该更改子复选框的单击布尔变量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>

＆＃34; SelectAll（）＆＃34;函数应该遍历单词列表并相应地切换已检查的变量。我不能使用角度检查因为我需要它来切换并且不具有与父复选框相同的状态，因为它也可以通过clciking在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;
        }
    }
}

这是一张图片供参考。单击粉红色选择器或黑色父选择器应勾选复选框。 Picture of page setup

提前感谢您的帮助！：d

Answer 1

感谢上面的评论，我在玩了一下后得到了完美的工作。我在这里发布我的解决方案：

有些事情需要注意。 array.splice没有按照用户发布的方式工作，它应该采用两个变量：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

Answer 2

我假设您需要孩子的复选框才能独立工作，对吗？在这种情况下，最好的办法是保留一个checkedWordlists数组。

SELECT SSN, FName, LName, Salary
  FROM employee
 WHERE SSN = (SELECT DISTINCT SuperSSN FROM employee WHERE SSN = SSN);

在您看来，

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

和html：

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

这应该做的大部分工作。我还没有对此进行过测试，但如果您想在上面添加数据集，我们可以创建一个小提琴，以确保它有效。

希望这会有所帮助

如何在角度控制器中的ng-repeat中迭代ng模型？

2 个答案: