如何使用 angular 在 ng-repeat 中获取选中的项目？

Question

我想从 angular 中带有 ng-repeat 的列表中获取检查项。选中该项目后，我想将该选中的项目放到另一个 list.Here 是我的代码。

 <div class="col-lg-12" data-ng-repeat="user in users track by $index">
    <div class="col-lg-12">
        <div class="col-lg-3"> {{user.name}} </div>
        <div class="col-lg-3">
            <input type="checkbox" data-ng-checked="selectUser(user)" data-ng-model="user.isSelected" />            
        </div>
    </div>
</div>

 <div class="col-lg-12" data-ng-repeat="selectedUser in selectedUsers track by $index">
    <div class="col-lg-12">
        <div class="col-lg-3"> {{selectedUser.name}} </div>
        <div class="col-lg-3">                  
        </div>
    </div>
</div>

这是我的控制器函数，用于获取选中的用户。

$scope.selectUser = function(user){
    if (user.isSelected) {
        if ($scope.selectedUsers.indexOf(user.id) === -1) {
            $scope.selectedUsers.push(user);
        }
    }else {
        var index = $scope.selectedUsers.indexOf(user.id);
        if ($scope.selectedUsers.indexOf(user.id) != -1) {
            $scope.selectedUsers.splice(index, 1);
        }

} 当我选中一个复选框时，所有用户值都将传递给 selectUsers() 函数。它会给出不正确的结果。我只想获得选定的用户。我该怎么做？

Answer 1

试试这个我觉得你需要这样

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Fruits = [{
                FruitId: 1,
                Name: 'Apple',
                Selected: false
            }, {
                FruitId: 2,
                Name: 'Mango',
                Selected: false
            }, {
                FruitId: 3,
                Name: 'Orange',
                Selected: false
            }];

            $scope.GetValue = function () {
                var message = "";
                for (var i = 0; i < $scope.Fruits.length; i++) {
                    if ($scope.Fruits[i].Selected) {
                        var fruitId = $scope.Fruits[i].FruitId;
                        var fruitName = $scope.Fruits[i].Name;
                        message += "Value: " + fruitId + " Text: " + fruitName + "\n";
                    }
                }

                $window.alert(message);
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-repeat="fruit in Fruits">
            <label for="chkCustomer_{{fruit.FruitId}}">
                <input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" />
                {{fruit.Name}}
            </label>
        </div>
        <br />
        <br />
        <input type="button" value="Get" ng-click="GetValue()" />
    </div>
</body>
</html>

Answer 2

你在这里犯的一些错误

您使用 ng-check 的方式有误。

试试这个

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript">

        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.allUsers = [{
                id:0,
                name:'john',
                age:26,
                selectedUser:true
            },{
                id:1,
                name:'isha',
                age:23,
                selectedUser:false
            },{
                id:2,
                name:'scott',
                age:34,
                selectedUser:true
            },{
                id:3,
                name:'riya',
                age:26,
                selectedUser:false
            },{
                id:4,
                name:'Adam',
                age:5,
                selectedUser:true
            },{
                id:5,
                name:'doe',
                age:56,
                selectedUser:true
            },{
                id:6,
                name:'Jack',
                age:22,
                selectedUser:true
            },{
                id:7,
                name:'robin',
                age:11,
                selectedUser:true
            }];

            $scope.selectedUsers = [];

            $scope.selectUser = function(user){
                if (user.isSelected) {
                   $scope.selectedUsers.push(user);
                }else {

                    for (var i = 0; i < $scope.selectedUsers.length; i++) {
                        if ($scope.selectedUsers[i].id == user.id) {
                            $scope.selectedUsers.splice(i, 1);
                        }
                    }
                }
            }
        })
    </script>
</head>
<body style="margin-top: 100px" ng-app="myApp" ng-controller="myCtrl">

 <div class="col-lg-12" data-ng-repeat="user in allUsers track by $index">
    <div class="col-lg-12">
        <div class="col-lg-3"> {{user.name}} </div>
        <div class="col-lg-3">                  
            <input type="checkbox" ng-change="selectUser(user)" data-ng-model="user.isSelected" />            

        </div>
    </div>
</div>

selected users
<div class="col-lg-12" data-ng-repeat="user in selectedUsers track by $index">
    <div class="col-lg-12">
        <div class="col-lg-3"> {{user.name}} </div>

        <div class="col-lg-3">
        </div>
    </div>
</div>



</body>
</html>

如何使用 angular 在 ng-repeat 中获取选中的项目？

How to get the checked item inside a ng-repeat using angular?

checkbox

angularjs

angularjs-ng-repeat