深究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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
原生JS实现幻灯片
Feb 22 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jQuery异步提交表单实例
May 30 jQuery
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php微信开发之图片回复功能
2018/06/14 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
js更优雅的兼容
2010/08/12 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
JS实现动态星空背景效果
2019/11/01 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python更新列表的方法
2015/07/28 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python ChainMap的使用和说明详解
2019/06/11 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python 初始化一个定长的数组实例
2019/12/02 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
什么是封装
2013/03/26 面试题
服装厂厂长职责
2013/12/16 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
眼镜促销方案
2014/03/15 职场文书
小学生演讲稿大全
2014/04/25 职场文书
村安全生产责任书
2014/08/25 职场文书
如何写早恋检讨书
2014/09/10 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
政审证明材料
2015/06/19 职场文书