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. sass.scss简单入门
			
    最近研究了一下sass和scss,清晰结构化,在某些地方的确强大,所以写了一篇入门教程,大概15分钟左右就能明白基本原理 什么是sass(css预处理器) Sass官网上是这样描述sass的,sass ...
    
			
    2. 
						
  2. PAT乙级练习1001
			
    1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...
    
			
    3. 
						
  3. 【Spring】BeanFactory解析bean详解
			
    在该文中来讲讲Spring框架中BeanFactory解析bean的过程,该文之前在小编原文中有发表过,要看原文的可以直接点击原文查看,先来看一个在Spring中一个基本的bean定义与使用. pac ...
    
			
    4. 
						
  4. Hibernate（三）之配置文件详解
			
    一.核心配置文件(hibernate.cfg.xml) <?xml version="1.0" encoding="UTF-8"?> <!DO ...
    
			
    5. 
						
  5. SpringMVC基础学习(二)—开发Handler
			
    一.Handler开发         Handler的开发方式在springmvc中有多种,下面我们主要讲解三种实现方式:实现Controller接口.实现HttpRequestHandler接口. ...
    
			
    6. 
						
  6. Spring基础学习(五)—事务管理
			
    一.事务基本认识 1.事务的概述      为了保证数据库中数据的一致性,数据的操作应当是离散的成组的逻辑单元.当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应当全部视 ...
    
			
    7. 
						
  7. JavaScript引用是如何工作的
			
    原文链接:https://www.sitepoint.com/how-javascript-references-work/ 摘要:JavaScript中没有指针,并且JavaScript中的引用与我 ...
    
			
    8. 
						
  8. JS实现轻量级计算器
			
    想尝试做一个网页版计算器后,参考了很多博客大神的代码,综合归纳.总结修改,整理如下文. 附:   Demo    源码 一.HTML+CSS 具体结构样式如下图,基本参照手机计算器界面.按钮功能可以查 ...
    
			
    9. 
						
  9. Java基础学习
			
    1,基本类型和引用类型 基本类型就是一个盒子,数据本身就保存在盒子里面,引用类型的盒子里放的是数据的五:地址,通过这个地址来找到数据. 基本数据类型和堆中对象的引用保存在栈中,引用类型保存在堆中. 2 ...
    
			
    10. 
						
  10. CSS布局之-水平垂直居中
			
    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
    
			
    11.