如果在 ng-repeat 中至少选中了一个复选框,则为按钮设置验证
Setting validation for button if atleast one check box is selected in ng-repeat
我遇到了一个问题,如果至少选中了一个位于 ng-repeat 中的复选框,我需要启用保存按钮。
当我第一次点击时它运行良好,但对多个复选框点击不起作用。
下面是工作插件:
我正在使用 ng-change 来获取选定的条件..
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
if (allTrue) {
$scope.isSelected = false;
} else {
$scope.isSelected = true;
}
}
这个怎么样:
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
$scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}
您用复选框值填充数组,然后检查该数组是否包含 true
值 indexOf
只需更改您的 getSelectedState
。参见 PLUNKER DEMO
喜欢:
$scope.getSelectedState = function() {
$scope.isSelected = true;
angular.forEach($scope.selected, function(key, val) {
if(key) {
$scope.isSelected = false;
}
});
};
根据你的 plunker 演示,你应该在 <tr>
标签中使用 ng-repeat
而不是 <body>
标签。
这是我的建议。每当有任何选中的项目时,它都会使变量"isAnyTrue = true"。
$scope.getSelectedState = () => {
var selectedCount = new Array();
var isAnyTrue = false;
for (var i in $scope.selected) {
if ($scope.selected[i] === true){
isAnyTrue = true;
}
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
$scope.isSelected = !isAnyTrue;
}
这是您更新后的 app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected = {};
$scope.outputType = [
{
"id": 1,
"name": "Coal"
},
{
"id": 2,
"name": "Rom"
},
{
"id": 3,
"name": "Waste"
}
];
$scope.months = ["JAN", "FEB"];
$scope.values = [];
$scope.isSelected = true;
$scope.getSelectedState = (id) => {
var selectedCount = 0;
for(var key in $scope.selected){
if($scope.selected[key]){
selectedCount++;
}
}
if(selectedCount!=0){
$scope.isSelected = false;
}else{
$scope.isSelected = true;
}
}
});
这样做:
$scope.isSelected = false;
$scope.getSelectedState = () => {
var atleastOneSelected = false;
for (var i in $scope.selected) {
atleastOneSelected = atleastOneSelected || $scope.selected[i];
}
$scope.isSelected = atleastOneSelected;
}
并且在 html 部分有以下内容:
<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>
我来晚了一点,我看到大家已经给了你很多很好的提示。
我发现了一些您可能会喜欢的不同的东西,它不涉及任何控制器 (Javascript) 代码。
这是复选框的HTML:
<label class="checkbox" >
<input type="checkbox" class="form-control"
ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
</label>
对于按钮:
<button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>
基本上一般的想法是:你有一个从 0 开始的 "validFields" 计数器(= 没有字段被激活)。如果此值大于 0,将显示该按钮。
每个复选框都有一个 "state",即 1 或 -1。每次单击复选框时,它都会将其状态添加到计数器中,指示它是打开还是关闭,并切换其状态。下次您单击时 "cancel" 之前添加到验证中的值。
工作 Plunker link 在这里:PLUNKER DEMO
编码愉快!
调用 ng-change 函数,(复选框在 ng-repeat 中):
<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>
<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>
.js
auditCtrl.showButton = function()
{
var arrayCheck = [];
for(var k = 0; k < auditCtrl.libraries.length; k++)
{
if(auditCtrl.libraries[k].isSelected == true)
{
arrayCheck.push(auditCtrl.libraries[k]);
}
}
if(arrayCheck.length > 0)
{
auditCtrl.showSend = true;
}
else
{
auditCtrl.showSend = false;
}
}
我遇到了一个问题,如果至少选中了一个位于 ng-repeat 中的复选框,我需要启用保存按钮。 当我第一次点击时它运行良好,但对多个复选框点击不起作用。
下面是工作插件:
我正在使用 ng-change 来获取选定的条件..
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
if (allTrue) {
$scope.isSelected = false;
} else {
$scope.isSelected = true;
}
}
这个怎么样:
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
$scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}
您用复选框值填充数组,然后检查该数组是否包含 true
值 indexOf
只需更改您的 getSelectedState
。参见 PLUNKER DEMO
喜欢:
$scope.getSelectedState = function() {
$scope.isSelected = true;
angular.forEach($scope.selected, function(key, val) {
if(key) {
$scope.isSelected = false;
}
});
};
根据你的 plunker 演示,你应该在 <tr>
标签中使用 ng-repeat
而不是 <body>
标签。
这是我的建议。每当有任何选中的项目时,它都会使变量"isAnyTrue = true"。
$scope.getSelectedState = () => {
var selectedCount = new Array();
var isAnyTrue = false;
for (var i in $scope.selected) {
if ($scope.selected[i] === true){
isAnyTrue = true;
}
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
$scope.isSelected = !isAnyTrue;
}
这是您更新后的 app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected = {};
$scope.outputType = [
{
"id": 1,
"name": "Coal"
},
{
"id": 2,
"name": "Rom"
},
{
"id": 3,
"name": "Waste"
}
];
$scope.months = ["JAN", "FEB"];
$scope.values = [];
$scope.isSelected = true;
$scope.getSelectedState = (id) => {
var selectedCount = 0;
for(var key in $scope.selected){
if($scope.selected[key]){
selectedCount++;
}
}
if(selectedCount!=0){
$scope.isSelected = false;
}else{
$scope.isSelected = true;
}
}
});
这样做:
$scope.isSelected = false;
$scope.getSelectedState = () => {
var atleastOneSelected = false;
for (var i in $scope.selected) {
atleastOneSelected = atleastOneSelected || $scope.selected[i];
}
$scope.isSelected = atleastOneSelected;
}
并且在 html 部分有以下内容:
<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>
我来晚了一点,我看到大家已经给了你很多很好的提示。
我发现了一些您可能会喜欢的不同的东西,它不涉及任何控制器 (Javascript) 代码。
这是复选框的HTML:
<label class="checkbox" >
<input type="checkbox" class="form-control"
ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
</label>
对于按钮:
<button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>
基本上一般的想法是:你有一个从 0 开始的 "validFields" 计数器(= 没有字段被激活)。如果此值大于 0,将显示该按钮。
每个复选框都有一个 "state",即 1 或 -1。每次单击复选框时,它都会将其状态添加到计数器中,指示它是打开还是关闭,并切换其状态。下次您单击时 "cancel" 之前添加到验证中的值。
工作 Plunker link 在这里:PLUNKER DEMO
编码愉快!
调用 ng-change 函数,(复选框在 ng-repeat 中):
<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>
<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>
.js
auditCtrl.showButton = function()
{
var arrayCheck = [];
for(var k = 0; k < auditCtrl.libraries.length; k++)
{
if(auditCtrl.libraries[k].isSelected == true)
{
arrayCheck.push(auditCtrl.libraries[k]);
}
}
if(arrayCheck.length > 0)
{
auditCtrl.showSend = true;
}
else
{
auditCtrl.showSend = false;
}
}