如何在一个ng重复使用角?

I want to get the check item from a list withing a ng-repeat in angular. Once the item is checked I want to put that checked item to another list.Here is my code so far.

我想要从一个列表中得到检查项，这是一个ng重复的角度。检查完项目后，我想把检查过的项目放到另一个列表中。这是我的代码。

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

This is my controller function to get the checked users.

这是我的控制器功能，以得到被检查的用户。

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

} When I check a checkbox, all the users value will be passed to selectUsers() function. And it will give incorrect result. I want only to get the selected users. How can I do this?

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

2 个解决方案

#1

Some mistakes you made here

你在这里犯了一些错误。

You are using ng-check in wrong way.

你正在用错误的方式使用ng-check。

Try this

试试这个

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

#2

Try this I think u need like this

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

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

#1