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. vue2.0自定义指令的使用方法
			
    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
    
			
    2. 
						
  2. echarts雷达图点击事件
			
    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
    
			
    3. 
						
  3. Struts2+Hibernate框架探险
			
    写这篇文章的目的 了解 JavaWeb 开发的人都知道SSH和SSM框架,前段时间开始接触 JavaWeb 开发,看了几个教学视频后就想上手构建一个小型 Web项目,可在跟着视频敲代码当中,使用 St ...
    
			
    4. 
						
  4. WebService基础学习(三)—CXF
			
    一.什么是CXF?      Apache CXF = Celtix + Xfire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.Apache ...
    
			
    5. 
						
  5. Spring-quartz 可传参（包括service注入）任务调度  多个任务调度
			
    1 JobDetail 注意:一个JobDetail中 只能触发一个方法,如果要调度多个任务 需要有多个job类! 普通任务:总调度(SchedulerFactoryBean)--> 定时调度器 ...
    
			
    6. 
						
  6. （读书笔记）函数参数浅析-JavaScript高级程序设计（第3版）
			
    ECMAScript函数不介意传递的参数个数,因为在其内部是用一个数组进行表示的.在函数体内可以通过arguments对象来访问这个参数数组,就像我们正常访问数组一样处理. arguments对象只是 ...
    
			
    7. 
						
  7. Webdriver API之操作（二）
			
    一.窗口截图 dirver.get_screenshot_as_file("D:\\report\\image\\xxx.jpg") 二.关闭窗口 dirver.close() # ...
    
			
    8. 
						
  8. Rookey.Frame v1.0极速开发平台稳定版发布
			
    Rookey.Frame v1.0经过一年时间的修改及沉淀,稳定版终于问世了,此版本经过上线系统验证,各个功能点都经过终端用户验证并持续优化,主要优化以下几个方面: 1.性能较原来提升3倍之多 2.修 ...
    
			
    9. 
						
  9. 【模板】Dijkstra的heap优化
			
    为了将最小费用最大流的spfa优化,决定将spfa换成heap优化的Dijkstra.(dijkstra不能处理负边权) 所以还得现学... 白点表示已经确定最短路径的点. 蓝点表示还未确定最短路径的 ...
    
			
    10. 
						
  10. tr069开源协议EasyCwmp移植
			
    1.平台MT7628 2.交叉编译器及版本信息mipsel-linux + buildroot-gcc463_32bits.tar.bz2 3.创建工作目录lancer@ubuntu:~$ mkdir ...
    
			
    11.