AngularJS - 在我选中所有选中后,用ng-click取消了复选框,它会检查所有内容,但清除所有内容并非全部清除
我有一个对象列表和Json数组。我已经使用ng-repeat声明了复选框,但是当我检查一个或多个复选框时 - 逐个选中复选框,然后如果我选择要选择全部的部分,选中所有复选框,选择全部按钮,则选择全部也。但是在我想取消全部后,数组没有对象是真的。但复选框的可视化仍然检查为什么?任何人都可以帮我吗?
以下是关于复选框
的编码部分
var app = angular.module('myApp', []);
app.controller('companyCtrl', ['$scope',
function($scope) {
$scope.addCompany = function(cmpid) {
$scope.form.companies.push(cmpid);
};
$scope.Companies = [{
"id": "001",
"name": "Company1",
"address": "Bla bla street, Somewhere City, Some Country"
}, {
"id": "002",
"name": "Company2",
"address": "Bla bla street, Somewhere City, Some Country"
}, {
"id": "003",
"name": "Company3",
"address": "Bla bla street, Somewhere City, Some Country"
}, {
"id": "004",
"name": "Company4",
"address": "Bla bla street, Somewhere City, Some Country"
}, {
"id": "005",
"name": "Company5",
"address": "Bla bla street, Somewhere City, Some Country"
}, {
"id": "006",
"name": "Company6",
"address": "Bla bla street, Somewhere City, Some Country"
}];
$scope.checkAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = true;
for (var i in $scope.Companies) {
$scope.addCompany($scope.Companies[i].id);
}
console.log($scope.form.companies);
};
$scope.uncheckAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = false;
for (var i in $scope.Companies) {
$scope.addCompany('');
}
console.log($scope.form.companies);
};
)
]
};

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div>
<a href="#" ng-click="checkAll()">Select All</a>
<a href="#" ng-click="uncheckAll()">Clear All</a>
</div>
<ul>
<li ng-repeat="cmp in Companies">
<div ng-if="cmp">
<input id="{{'company-'+ $index}}" type="checkbox" ng-model="cmp.Selected" ng-click="addCompany(cmp.id)" ng-value="cmp.id" ng-checked="all || cmp.Selected" />
<label for="{{'company-'+$index}}">
<div class="title">{{cmp.name}}</div>
</label>
</div>
</li>
</ul>
</body>
</html>
&#13;
答案 0 :(得分:0)
var app = angular.module('myApp', []);
app.controller('companyCtrl', ['$scope',
function($scope) {
$scope.addCompany = function(cmpid) {
$scope.form.companies.push(cmpid);
};
$scope.Companies = [
{
"id": "001",
"name": "Company1",
"address": "Bla bla street, Somewhere City, Some Country"
},
{
"id": "002",
"name": "Company2",
"address": "Bla bla street, Somewhere City, Some Country"
},
{
"id": "003",
"name": "Company3",
"address": "Bla bla street, Somewhere City, Some Country"
},
{
"id": "004",
"name": "Company4",
"address": "Bla bla street, Somewhere City, Some Country"
},
{
"id": "005",
"name": "Company5",
"address": "Bla bla street, Somewhere City, Some Country"
},
{
"id": "006",
"name": "Company6",
"address": "Bla bla street, Somewhere City, Some Country"
}
];
$scope.checkAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = true;
for (var i in $scope.Companies) {
$scope.addCompany($scope.Companies[i].id);
}
console.log($scope.form.companies);
};
$scope.uncheckAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = false;
for (var i in $scope.Companies) {
$scope.addCompany('');
}
console.log($scope.form.companies);
};
}
]);
答案 1 :(得分:0)
你写了ng-check all || cmp.Selected
所以在致电uncheckAll
之后你也必须清除cmp.Selected
。在unCheckAll函数中,您向$ scope.form.companies添加了不必要的项目,我认为$ scope.form.companies在unCheckAll之后必须为空。
如果我是你
HTML
ng-checked="cmp.Selected"
JS
$scope.checkAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
_.each($scope.Companies, function(comp){
comp.Selected = true;
$scope.addCompany(comp.id);
});
console.log($scope.form.companies);
};
$scope.uncheckAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
_.each($scope.Companies, function(comp){
comp.Selected = false;
});
console.log($scope.form.companies);
};
答案 2 :(得分:0)
解决。我已经将uncheck-all函数的for循环更改为angular forEach,而不是修复了我的问题,同时在addCompany()函数上几乎没有变化;
$scope.checkAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = true;
angular.forEach($scope.Companies, function (cmp) {
cmp.Selected = $scope.all;
$scope.addCompany(cmp.id);
});
};
$scope.uncheckAll = function() {
$scope.form.companies.splice(0, $scope.form.companies.length);
$scope.all = false;
angular.forEach($scope.Companies, function (cmp) {
cmp.Selected = $scope.all;
$scope.addCompany('');
});
console.log($scope.form.companies);
};
还使用以下内容更新了addCompany()函数;
$scope.addCompany = function (cmpid){
$scope.latestCompanies =
{
"id": cmpid,
};
if(cmpid === '' || cmpid === null){
$scope.form.companies= [];
console.log(JSON.stringify($scope.form));
}else {
$scope.form.companies.push($scope.latestCompanies);
}
};
也谢谢你@keklikhasan提醒我使用forEach