Angular，在ng中重复获取选中复选框(或单选框）的索引

Angular, getting index of checked checkbox (or radio) in ng-repeat

本文关键字：单选框 索引 复选框 获取 ng Angular      更新时间：2023-09-26

我正在创建一组具有ng repeat的表单，每个表单都有一个复选框（如果重要的话，可能会更改为单选），我正在尝试操作选中的特定级别。所以我想做的是传递复选框的索引（ng重复中的索引）。让我向你展示我的意思

<div class="saInstrcutionTableRow"  ng-repeat="parent in listTable track by $index">
                        <div class="saInstrcutionLeft"></div>
                        <!-- parent levels -->
                        <div  class="saInstrcutionCRight saInstrcutionTitle"><div class="parentSub1"> <input type="checkbox" ng-model="levelPicker">{{parent.name}}</div></div>
                        </div>
                    </div>

所以在这里，我只是在ng model="levelPicker"下用输入重复这个名称。我按下了一个按钮，它使用了我设置的一个功能，该功能只需要在重复中传递复选框的索引，所以它是这样的-

<button type="button" class="resultsButton" ng-click="submitNewSub(Checkbox index here)">Submit</button>

是否有某种方法可以针对选中的复选框并在重复中获取其索引？我正在使用它来添加子项。我尝试了一些方法，但我不确定如何直接引用它并获得它的索引（在角度内）。任何意见都将不胜感激。谢谢

您可以使用类似的东西捕获所选索引

<input type="checkbox" ng-change="onChange({{$index}})" ... />

on更改功能

  $rootScope.onChange = function(idx) {
    $rootScope.selectedIndex = idx;
  };

然后使用selectedIndex来满足您的需求。下面是一个快速示例

ng repeat为每个项创建一个新的范围，因此父项不能直接访问任何复选框设置的"levelPicker"。

最正确的方法可能是这样的：

$scope.listTable = [
    { name : 'a', selected: false },
    { name : 'b', selected: false },
    { name : 'c', selected: false }
];
$scope.selectMe = function ( index, previousValue ) {
    $scope.listTable[index].selected = !previousValue;
};
$scope.submitNewSub = function () {
    for ( var i=0; i<$scope.listTable.length; i++ ) {
        console.log($scope.listTable[i].name+
            ($scope.listTable[i].selected ?
                ' is selected' :
                ' is not selected')
        );
    }
}

在html:中有这个

<input type="checkbox" ng-click="selectMe($index, levelPicker)" ng-model="levelPicker">{{parent.name}}

或者，您可以查看所有子作用域并检查它们的levelPicker值：

$scope.submitNewSub = function () {
    for(var cs = $scope.$$childHead; cs; cs = cs.$$nextSibling) {
        console.log($scope.listTable[cs.$index].name+
            (cs.levelPicker ?
                ' is selected' :
                ' is not selected')
        );
    }
};
相关文章：