一、问题
工作时碰到一个问题,一条记录的详情是一个表单,表单中包含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,要重新设计算法。