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>






 




 


 


 


{"list":[{"content":"普通发票","type":1},{"content":"电子产品","type":2}]}  要传给后台的数据   页面展示  上面传type=1,下面增加的填type=2


 






 


html


 






　　　　　　　　div.form-group label.control-label.col-md-3 发票类型 div.col-md-6 label.checkbox.pull-left(ng-repeat="(key,type) in globalConfig.invoice_type" style="margin-left:30px") input(type="checkbox" name="invoice_type" ng-model="invoice_type[key]" ng-true-value="true" ng-false-value="" ng-click="") | {{type}} //- select.form-control(ng-options="key as value for (key,value) in globalConfig.invoice_type" ng-model="info.list.invoice_type" multiple="true") //- option(value='') （发票类型可多选） div.form-group label.control-label.col-md-3 发票内容 div.col-md-6 .form-group span.btn.btn-danger(ng-click="addFn(sendData.list)") 添加 div(ng-repeat="spec in sendData.list") .input-group input.form-control(type="text" ng-model="spec.content" name="brand_name" ) .input-group-addon(ng-click="removeFn( sendData.content,spec)") i.glyphicon.glyphicon-remove






 


 


js


 






angular.module('laoyou')

.controller('invoiceCtrl', ['$scope','$http','$stateParams','api',function($scope, $http, $stateParams,api){       

 $scope.sendData = {list:[]};

        $scope.addFn=function(list,item){

            // console.log(list)

            // [{type: 2, content: "ert"}, {type: 2, content: "fgh"}]

            list.push({type:2});

            /*if(list == undefined){

                list = [];

            }else{

                list.push({});

            }*/

        }

        $scope.removeFn=function(list,item){

            var index=list.indexOf(item);

            list.splice(index,1)

        }

//      初始化invoice_type

        $scope.invoice_type={};

        $scope.sendFn = function () {

            sendData=angular.copy($scope.sendData);

            // sendData= {};

            // sendData.content = $scope.sendData.content;

            var type= [{"content":"普通发票","type":1},{"content":"增值税专用发票","type":1},{"content":"电子发票","type":1}];

            // sendData.type=[];

            var invoice=$scope.invoice_type;

            console.log(invoice)

            for(var x in invoice){

                if(invoice[x]){

                    sendData.list.push(type[x-1]); //传入想要的数

                }

            }

             console.log(sendData);

             /*var info = {};

             info.list = [sendData];*/

            // console.log(info);

            $http.post("invoice/save", sendData).success(function (data) {

                if (data.statusCode === '0') {

                    alert("提交成功");

                    /*if ($scope.pageModel === 'add') {

                        $state.go("home.employee.view", {

                            id: data.data

                        })

                    }else{

                        $state.go("home.employee.view", {

                            id: $stateParams.id

                        })

                    }*/

                }

            })

        }

}])








												


											
ng-checked选择和点击增加dom的更多相关文章
	

    
								
  1. jquery easyui datagrid 获取Checked选择行(勾选行)数据
		
    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
    
		
    2. 
						
  2. 点击增加删除class
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    3. 
						
  3. 仅IE6/7中添加checked为true的input到DOM中为false
		
    HTML INPUT元素有个checked属性,多数情况type为radio和checkbox. 当创建一个input,checked属性赋值为true,添加到DOM文档中,当再次取checked属性 ...
    
		
    4. 
						
  4. 动态根据checkbox 增加Dom
		
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" ...
    
		
    5. 
						
  5. 页面中引入mui 地址选择，点击页面中其他input时页面回到顶部
		
    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
    
		
    6. 
						
  6. D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线...
		
    觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加 ...
    
		
    7. 
						
  7. js实现点击增加文本输入框
		
    html代码: <ul id="ulid21" > <li id="li11" >问卷选项设置:</li> </ul& ...
    
		
    8. 
						
  8. html 跳转页面传参、点击获取DOM参数
		
    虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...
    
		
    9. 
						
  9. checked 选择框选中
		
    移除属性,两种方式都可 $browsers.removeAttr("checked"); $browsers.attr("checked",false); // ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. c++内存优化：二级间接索引模式内存池
			
    /********************************************************* 在一些不确定内存总占用量的情形下,频繁的使用new申请内存,再通过链表 进行索引似 ...
    
			
    2. 
						
  2. AES算法，DES算法，RSA算法JAVA实现
			
    1     AES算法 1.1    算法描述 1.1.1      设计思想 Rijndael密码的设计力求满足以下3条标准: ① 抵抗所有已知的攻击. ② 在多个平台上速度快,编码紧凑. ③ 设计 ...
    
			
    3. 
						
  3. 学习MVC之租房网站（三）-编写实体类并创建数据库
			
    在上一篇<学习MVC之租房网站(二)-框架搭建及准备工作>中,搭建好了项目框架,并配置了EF.Log4Net和进程外Session.接下来会编写Eneity类并采用CodeFirst的方式 ...
    
			
    4. 
						
  4. Android 开源优秀的项目
			
    webrtc square/picasso  Android 的一个强大的图像下载和缓存库 A powerful image downloading and caching library for A ...
    
			
    5. 
						
  5. vue2.0+elementUI构建单页面后台管理平台
			
    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
    
			
    6. 
						
  6. 为部署ASP.NET Core准备：使用Hyper-V安装Ubuntu Server 16.10
			
    概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...
    
			
    7. 
						
  7. jdk动态代理与cglib代理、spring aop代理实现原理
			
    原创声明:本博客来源与本人另一博客[http://blog.csdn.net/liaohaojian/article/details/63683317]原创作品,绝非他处摘取 代理(proxy)的定义 ...
    
			
    8. 
						
  8. 分享我的学习记录 svn地址
			
    地址:svn://121.42.160.2/myproject 用户名:scaner 密码:zhinengkan 这个用户只有读权限,没有修改的权限,如果有什么建议或代码中有不对的地方,欢迎再留言中告 ...
    
			
    9. 
						
  9. URL传中文参数导致乱码的解决方案之encodeURI
			
    通过URL传中文参数时,在服务端后台获取到的值往往会出现乱码问题,解决方案有很多种,本文主要介绍如何通过encodeURI来解决中文乱码问题: first:前端传递参数的时候需要对中文参数进行两次en ...
    
			
    10. 
						
  10. configure: error: Cannot find php-config. Please use --with-php-config=PATH 错误的解决方案
			
    一般出现这个错误说明你执行 ./configure 时  --with-php-config 这个参数配置路径错误导致的. 修改为: ./configure --with-php-config=/us ...
    
			
    11.