Angularjs:复选框和ng-change

mpe*_*g90 4 javascript checkbox angularjs angularjs-ng-change

我有问题要了解ng-change的工作原理.我有一个邀请加入拍卖的用户列表.我想用一个复选框来做这件事.如果选中该用户,则必须将其名称保存到数组中.后来我会邀请他们(我只知道怎么做).但我不明白如何使用复选框.我做了这样的事情:

<ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
        <img ng-src="{{user.img}}" class="image2" >
        <div class="username"> {{user.name}}</div>
        <div class="userrole"> {{user.role}} </div>
        <div class="usercompany">{{user.company}}</div>
        <input type="checkbox"  ng-model="isChecked" ng-change="insertinvited(user.name)">
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

在我的控制器中:

$scope.invited = [];
$scope.insertinvited= function (name) {
    if($scope.isChecked){
        $scope.invited.push(name)
    } else {
        console.log($scope.invited);
    }
};
Run Code Online (Sandbox Code Playgroud)

但是这不起作用,在控制台中数组总是空的.

Mis*_*lis 16

您的代码中的问题是您isChecked的所有usersngRepeated 使用了复选框模型():

<ul class="list-group" ng-repeat="user in users">
    ...
    <input type="checkbox" ng-model="isChecked" ng-change="insertinvited(user.name)">
</ul>
Run Code Online (Sandbox Code Playgroud)

我建议你为每个用户设一个复选框模型:

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
Run Code Online (Sandbox Code Playgroud)

请注意,在你ng-change,我传递整个user对象,而不仅仅是user.name(因为我也需要user.isChecked属性).


这是"新" insertinvited()功能:

$scope.insertinvited = function(user) {
    if(user.isChecked) {
        $scope.invited.push(user.name);
    } else {
        var toDel = $scope.invited.indexOf(user);
        $scope.invited.splice(toDel);
    }
}
Run Code Online (Sandbox Code Playgroud)