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. JavaScript写一个表格排序类
			
    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...
    
			
    2. 
						
  2. 使用VS2015将解决方案同步更新到Github上
			
    如今开源已经是一种趋势与潮流了,今天就来谈一谈如何将利用VS将我们的解决方案同步更新到Github上. 第一步:登录自己的Github账号(没有的自行注册). 我的Github登录后的界面: 第二步: ...
    
			
    3. 
						
  3. Java中集合框架，Collection接口、Set接口、List接口、Map接口，已经常用的它们的实现类，简单的JDK源码分析底层实现
			
    (一)集合框架: Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(实现接口的类).所有抽象出来的数据结构和操作(算法)统称为集合框架. 程序员在具体应用的时候,不必考虑数据结构和 ...
    
			
    4. 
						
  4. opencv构建高斯卷积核
			
    关于高斯核函数可以参见阮一峰老师的日志:高斯模糊的算法 如何使用高斯核进行高斯模糊可以参见我的另一篇日志:opencv构建自定义卷积 Mat Gaussian_kernal(int kernel_si ...
    
			
    5. 
						
  5. huffman压缩解压文件【代码】
			
    距离上次写完哈夫曼编码已经过去一周了,这一周都在写huffman压缩解压,哎,在很多小错误上浪费了很多时间调bug.其实这个程序的最关键部分不是我自己想的,而是借鉴了某位园友的代码,但是,无论如何,自 ...
    
			
    6. 
						
  6. （读书笔记）函数参数浅析-JavaScript高级程序设计（第3版）
			
    ECMAScript函数不介意传递的参数个数,因为在其内部是用一个数组进行表示的.在函数体内可以通过arguments对象来访问这个参数数组,就像我们正常访问数组一样处理. arguments对象只是 ...
    
			
    7. 
						
  7. phpcms 笔记
			
      首先是要把首页分为三个部分  : 导航部分 .尾部和首页中间部分  用了三个不同的文件 header.html ; index.html; footer.html   在使用phpcms之前 首先 ...
    
			
    8. 
						
  8. centos7.2部署最新ELK 5.3
			
    ## 安装elasticsearch服务> 安装jdk 1.8 ```rpm -ivh jdk-8u101-linux-x64.rpmjava -version``` > 配置rpm `` ...
    
			
    9. 
						
  9. 记一次 Newtonsoft.Json 巧妙的用法（C#）
			
    数据添加的功能 有一个表格提交数据如下: 是否选择和文本值.分开保存到数据库太麻烦.取得时候也麻烦 想到了存成json数据.一个字段就可以了. html代码: <table class=&quo ...
    
			
    10. 
						
  10. FreeSWITCH 安装配置的 各种坑, 填坑
			
    个人安装环境: OS:CentOS6.7 64位 FreeSWITCH Ver:1.6.17 一. 编译出错 安装 之前, 最好 先安装 这几个东西(如果有, 请忽略): yasm (有nasm的话  ...
    
			
    11.