深究AngularJS——ng-checked（回写：带真实案例代码）
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS入门教程之ng-checked 指令详解
AngularJS ng-checked 指令 AngularJS 实例 选择一个或选择所有选项: <!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>
-
深究AngularJS——ng-checked（回写：带真实案例代码）
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"><
-
AngularJs实现分页功能不带省略号的代码
angularJs 的分页重点体现在对 过滤器 的使用.这个过滤器也并不复杂. 首先上 html 代码: <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title&g
-
form表单回写技术java实现
本文实例为大家分享了form表单回写技术,供大家参考,具体内容如下 回写支持的java拼js的方法: /** * 回写表单 * * @param mRequest * @return */ public static String writeBackMapToForm(Map mRequest) { return writeBackMapToForm(mRequest, new String[]{}, "writeBackMapToForm"); } /** * 回写表单 * * @p
-
Angularjs 手写日历的实现代码（不用插件）
本文介绍了Angularjs 手写日历的实现代码(不用插件),分享给大家,具体如下: 效果: Html: <div class="plan_content_box" data-ng-init="showTime()"> <div class="field" style="width: 100%;"> <span class="field_label" style="w
-
Ionic+AngularJS实现登录和注册带验证功能
登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
-
python使用pyqt写带界面工具的示例代码
上篇介绍的使用python自带tkinter包,来写带界面的工具. 此篇介绍使用pyqt来开发测试工具. tkinter的好处是python官方自带,上手容易(但手写控件复杂),布局和摆放都不直观和容易,因为是像素坐标定位,需要花较长时间在界面开发上.pyqt是第三方gui开发工具,是目前公认的python上最好的客户端界面开发工具,因为控件是通过qt设计师的手动拖拽,调整颜色 字体 大小等样式也很简单,不需要去代码层面来写大量界面代码,真正的所见即所得. 学习pyqt需要安装这些文件,pyqt
-
详解nodejs通过响应回写的方式渲染页面资源
我们一般通过node框架提供的api操作页面渲染,如何利用原始回写的方式来实现同样的功能呢 下面是通过node 提供的异步地读取一个文件的全部内容api readFile进行操作,代码如下: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo
-
Java page cache回写机制案例详解
JAVA写文件的基本流程 在不使用堆外内存的情况下,java在写文件时,先将字节写入JVM的堆内内存中:然后调用jvm的写文件函数,将字节写入jvm的堆外内存中,jvm再调用系统内核的写文件函数,将字节写入内核的heap中:然后内核将字节写入page cache中,将page cache状态改为dirty,根据page cache的回写机制在合适的时机将字节写入磁盘. page cache 自动回写机制 page cache的回写时机由系统配置/etc/sysctl.conf 中的几个参数决定,
-
女神相册密码忘记了 我只用Python写了20行代码
视频地址 我用20行代码,帮女神破解相册密码 一.事情是这样的 今早上班,公司女神小姐姐说,她去年去三亚旅游的照片打不开了 好奇问了一下才知道. 原来是,她把照片压缩了,而且还加了密码. 但是密码不记得了,只记得是一串6位数字. 话说照片压缩率也不高,而且还加密,难道是有什么可爱的小照片 但是作为一个正(ba)直(gua)的技术人员 我跟她说:"这事交给我,python写个脚本,帮你破解掉~~" 二.首先回顾一下女神的操作流程 对相册进行压缩的时候,添加了密码. LIke This ↓
-
20个正则表达式必知(能让你少写1,000行代码)
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 列目录时, dir *.txt或ls *.txt中的*.txt就不是一个正则表达式,因为这里*与正则式的*的含义是不同的. 构造正则表达式的方法和创建数学表达式的方法一样.也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式.正则表达式的组件可以是单个的字符.字符集合.字符范围.字符间的选择或者所有这些组件