[英]Angularjs: checkbox and 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>
在我的控制器中:
$scope.invited = [];
$scope.insertinvited= function (name) {
if($scope.isChecked){
$scope.invited.push(name)
} else {
console.log($scope.invited);
}
};
但这不起作用,在控制台中数组始终为空。
您代码中的问题是您的复选框模型( isChecked
)被您 ngRepeated 的所有users
使用:
<ul class="list-group" ng-repeat="user in users">
...
<input type="checkbox" ng-model="isChecked" ng-change="insertinvited(user.name)">
</ul>
我建议您为每个用户设置一个复选框模型:
<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
请注意,在您的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.name);
$scope.invited.splice(toDel, 1);
}
}
你所需要的就是isChecked
在所有项目的ng-repeat
,而不仅仅是作为单个变量。 所以,我改变了你的checkbox
如:
<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
这是工作示例:
angular.module("myApp", []) .controller("myCtrl", function($scope) { $scope.users = [{ name: "test1", role: "manager", company: "google", img: "" }]; $scope.invited = []; $scope.insertinvited = function(user) { if (user.isChecked) { $scope.invited.push(user.name) } console.log($scope.invited); }; })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <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="user.isChecked" ng-change="insertinvited(user)"> </li> </ul> </div>
编辑:但是,这样做,您还需要处理删除。 我建议你改用以下方法。
说明:在更改任何复选框值时,您将使用isChecked
设置为true
来过滤所有用户。
angular.module("myApp", []) .controller("myCtrl", function($scope) { $scope.users = [{ name: "test1", role: "manager", company: "google", img: "" }]; $scope.invited = []; $scope.insertinvited = function() { $scope.invited = $scope.users.filter(obj => obj.isChecked) $scope.invited = $scope.invited.map(obj => obj.name) console.log($scope.invited); }; })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <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="user.isChecked" ng-change="insertinvited(user)"> </li> </ul> </div>
用它
<input type="checkbox" id="{{'j' + $index}}" name="{{'j' + $index}}" ng-model="tasks.Checked" ng-change="checkinTask(tasks)"
这部分来自控制器。
$scope.checkinTask = function (task) {
if (task.Checked === true) {
task.Lineclass = "checkedTask";
$scope.disabled = false;
trash.removeClass("disabled");
} else {
task.Lineclass = "";
}
var checkedExist = false;
tasks.forEach(function (v) {
if (v.Checked) {
checkedExist = true;
}
});
if (!checkedExist) {
$scope.disabled = true;
trash.addClass("disabled");
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.