深究AngularJS——ng-checked(回写:带真实案例代码)


Posted in Javascript onJune 13, 2017

1.需求

在添加页面实现一个checkbox的选择,然后在详情页面展示时,会自动选上之前被选中的。

2.添加页面

看官最好将这个代码复制过去看看效果。

<!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" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}}
  </div>
  结果:{{result}}
</div>
<script>  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    //创建checkbox用的
    $scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];
    //存储已选
    $scope.result = [];
    //触发事件
    $scope.select = function(id,event){      
      console.log(event)//打印看看这是什么,有利于理解
      console.log(action)

      var action = event.target;
      if(action.checked){//选中,就添加
        if($scope.result.indexOf(id) == -1){//不存在就添加
          $scope.result.push(id);
        }
      }else{//去除就删除result里
        var idx = $scope.result.indexOf(id);
        if( idx != -1){//不存在就添加
          $scope.result.splice(idx,1);
        }
      }
    };
  });
</script>
</body>
</html>

3.详情展示

//假设添加页面的结果是:$scope.result = [3,2];

<!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" >
  回写时设置不可选,即设ng-disabled="true"
  <div ng-repeat="item in list">
    <input type="checkbox" name="tagName" ng-checked="isSelected(item.id)" value="item.id" ng-disabled="true" > {{item.shortName}}
  </div>
  结果:{{result}}
</div>

<script>  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    //创建checkbox用的
    $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; 
      //只要返回的结果为true,则对应的checkbox就会被选中,
      //所以我的思路是看存添加页面的结果里是否含有当前id即value值,
      //有就返回的true,没有就返回false
    };
  });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jquery处理json对象
Nov 03 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 #Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 #Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 #Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Django实现单用户登录的方法示例
2019/03/28 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Django多数据库联用实现方法解析
2020/11/12 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
八年级历史教学反思
2014/01/10 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
写给女朋友的保证书
2015/05/09 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB