封面

angularjs复选框

使用angularjs做复选框,这也是一个常见的需求。

一、代码

1. html

<div ng-repeat="tag in tags.content track by $index ">
<input type="checkbox"
title="标签"
class="btn "
id="{{tag.id}}"
name="{{tag.name}}"
ng-checked="isSelected(tag.id)" //动态 true false
ng-click="updateSelection($event,tag.id)" //将id添加到Array中
ng-model="tags">
{{tag.name}}
</div>

2. controller

$scope.selected = [];
$scope.selectedTags = [];

//实际操作数组的方法
var updateSelected = function (action, id, name) {
if (action == 'add' && $scope.selected.indexOf(id) == -1) {
$scope.selected.push(id);
$scope.selectedTags.push(name);
}
if (action == 'remove' && $scope.selected.indexOf(id) != -1) {
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx, 1);
$scope.selectedTags.splice(idx, 1);
}
console.log($scope.selected);
};

//根据传入的动作和要操作的id更新Array
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id, checkbox.name);
};

//返回true false
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};

二、效果图

checkbox效果图

三、参考文档

ZH奶酪:AngularJS判断checkbox/复选框是否选中并实时显示

四、 附上我github的地址

https://github.com/houko

文章目录
  1. 1. 一、代码
    1. 1.1. 1. html
    2. 1.2. 2. controller
  2. 2. 二、效果图
  3. 3. 三、参考文档
  4. 4. 四、 附上我github的地址


twitter分享


如果想及时收到回复,可在 订阅中心Participating中勾选Email

Fork me on GitHub