深究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 滑入滑出效果实现代码
Mar 27 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
js实现车辆管理系统
Aug 26 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处理斐波那契数列非递归方法
2012/02/04 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python中的__slots__使用示例
2015/02/26 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python变量和数据类型详解
2017/02/15 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
对python多线程与global变量详解
2018/11/09 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python下载微信公众号相关文章
2019/02/26 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
旅游管理专业学生求职信
2013/09/28 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
培训主管岗位职责
2014/02/01 职场文书
银行内勤岗位职责
2014/04/09 职场文书
青年文明号申报材料
2014/12/23 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
情况说明书格式及范文
2019/06/24 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书