深究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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
实现高性能javascript的注意事项
May 27 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
详解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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP数字格式化
2006/12/06 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python中的集合介绍
2019/01/28 Python
python生成requirements.txt的两种方法
2019/09/18 Python
详解python itertools功能
2020/02/07 Python
自动化专业本科毕业生求职信
2013/10/20 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
家长给小学生的评语
2014/01/30 职场文书
高中军训第一天感言
2014/03/06 职场文书
护士求职自荐信
2015/03/25 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
入团申请书格式
2019/06/20 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB