angualrJS之checkbox默认选中项实例

来源：互联网发布：淘宝直播怎么没有了编辑：程序博客网时间：2024/05/17 06:17

一、问题
工作时碰到一个问题，一条记录的详情是一个表单，表单中包含checkbox和radio等元素，这个表单有默认值且可以修改，接口已返回默认值，需要将默认值绑定到表单。平时没有接触过给checkbox和radio绑定值，也不太熟悉angularJS，只能求助于百度。

二、解决过程
在百度搜到一片很好的文章将问题讲的浅显易懂，但由于没有收藏，翻遍历史记录也找不到那篇文章了，好在代码在调试时保存了下来，代码大致步骤为：
1、创建一个list初始化表单（checkbox部分）；
2、通过接口获取返回值；
3、通过在list内查询返回值，返回true或false；
4、ng-checked属性通过返回值判断元素是否被勾选；
下面是一个完整的demo：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl" >    <div ng-repeat="item in list">        <input type="checkbox" name="tagName"  ng-checked="isSelected(item.id)" value="item.id"  > {{item.shortName}}    </div>    结果：{{result}}</div><script>        var app = angular.module('myApp', []);    app.controller('myCtrl', function($scope) {        //初始化checkbox的list        $scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];        //此处省略接口，直接取返回值        $scope.result = [3,2];        //被选中条件：ng-checked的结果为true        $scope.isSelected = function(id){                      return $scope.result.indexOf(id)!=-1;             //将result与checkbox的当前id即value值匹配            //有就返回的true，没有就返回false        };    });</script></body></html>

三、适用范围
上面的demo，适用于接口返回一个key，其value为被选中的选项。如果是多个选项多个key，value为true或false，要重新设计算法。

0 0