angualrJS之checkbox默认选中项实例

最新推荐文章于 2019-07-09 15:11:01 发布

miniminixu

最新推荐文章于 2019-07-09 15:11:01 发布

阅读量1.1w

点赞数 6

分类专栏： angularJS 文章标签： angularjs checkbox

本文链接：https://blog.csdn.net/miniminixu/article/details/52077174

版权

angularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

miniminixu

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
angualrJS之checkbox默认选中项实例

一、问题工作时碰到一个问题，一条记录的详情是一个表单，表单中包含checkbox和radio等元素，这个表单有默认值且可以修改，接口已返回默认值，需要将默认值绑定到表单。平时没有接触过给checkbox和radio绑定值，也不太熟悉angularJS，只能求助于百度。二、解决过程在百度搜到一片很好的文章将问题讲的浅显易懂，但由于没有收藏，翻遍历史记录也找不到那篇文章了，好在代码在调试时保存了
复制链接

扫一扫