如果没有复选框被选中
如何禁用按钮,我得到了以下的角模板:如果没有复选框被选中
<tr ng-repeat="user in users">
<td><input type="checkbox"></td>
<td>{{user.username}}</td>
<td>{{user.apiKey}}</td>
<td>{{user.apiSecret}}</td>
</tr>
...
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
如何禁用按钮,如果没有复选框被选中,但实现它时,表中的一个或多个复选框被选中?
我怎样才能确定哪个表项被检查并访问用户数据?
角度的方式是使用ng-disabled
。作为一个例子,你可以使用这个:
ng-disabled="!checked"
该!意思是做相反的,所以真正的==假=真
完整的例子:
<td>
<input type="checkbox" ng-model="checked"
</td>
<button class="btn btn-danger" ng-disabled="!checked"><i class="fa fa-trash-o"></i>Submit</button>
了解更多关于NG-禁用此:
https://docs.angularjs.org/api/ng/directive/ngDisabled
什么是HTML属性checked
?
checked属性是布尔属性。
如果存在,它指定在加载页面时预先选择(检查)一个元素应为 。
检查的属性可以用于和
<input type="radio">
。
在非angularJS例子(对@ GothBurz的答案,这是更优雅,但不太直观):
的jQuery:
$("input:checkbox").change(function() { // every time a checkbox changes
$("button").attr("disabled", "true"); // start button disabled
$("input:checkbox:checked").each(function() {
$("button").removeAttr("disabled"); // if any checkbox checked, make button enabled
});
});
看到一个工作示例on JSFiddle.net。
或者,对于更长的非jQuery示例,请参阅this fiddle。
但问题中没有标记jQuery;除非jQuery的angular.js自动需要?我没有使用角度,所以我真的不知道。 –
@DavidThomas这可以很容易地转换为纯JS。我会举另一个例子。 –
如何使用整个jQuery函数vs单个角度更优雅的线? –
您可以将checked
状态添加到用户,并检查每个复选框更改是否仍有一个用户被选中。
可以使用angular.forEach
进行检查,使用for循环或使用underscore.js(如果您想使用它)。 在该循环中,您还可以创建已检查用户的数组。
请看下面的演示或者fiddle。
angular.module('demoApp', [])
.controller('MainController', MainController);
function MainController($scope) {
$scope.users = [{
username: 'John',
apiKey: '1234',
apiSecret: '2345'
}, {
username: 'Jane',
apiKey: '234',
apiSecret: '24'
}];
$scope.checkedUsers = [];
$scope.checkButtonState = function() {
\t /* with underscore.js
$scope.checkedUsers = _.where($scope.users, {check: true});
$scope.enableButton = _.chain($scope.checkedUsers)
.pluck('check').some().value();
*/
$scope.checkedUsers = [];
angular.forEach($scope.users, function(user) {
\t if (user.check) {
$scope.checkedUsers.push(user);
}
});
$scope.enableButton = $scope.checkedUsers.length > 0;
};
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
<table>
<tr ng-repeat="user in users">
<td>
<input
ng-model="user.check"
ng-change="checkButtonState()"
type="checkbox">
</td>
<td>{{user.username}}</td>
<td>{{user.apiKey}}</td>
<td>{{user.apiSecret}}</td>
</tr>
</table>
<button type="button" class="btn btn-danger" ng-disabled="!enableButton"><i class="fa fa-trash-o"></i>
</button>
{{checkedUsers}}
</div>
什么是 “选中” 和它从何而来? –
查看更新的答案,这是一个HTML属性。 –
这似乎并不适用于我: '' '' 但是当我检查时没有任何反应。 –