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. 【Java基础 】Java7 NIO Files,Path 操作文件
			
    从Java1.0到1.3,我们在开发需要I/O支持的应用时,要面临以下问题: 没有数据缓冲区或通道的概念,开发人员要编程处理很多底层细节 I/O操作会被阻塞,扩展能力有限 所支持的字符集编码有限,需要 ...
    
			
    2. 
						
  2. java学习常遇问题及解决方案
			
    eclipse中的项目运行时不出现run as→java application选项? 解决方案☞必须有正确的主方法,即public static void main(String[]args){}
    
			
    3. 
						
  3. 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件
			
    [摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...
    
			
    4. 
						
  4. Alamofire源码解读系列(十二)之时间轴(Timeline)
			
    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
    
			
    5. 
						
  5. 在hive中直接对timestamp类型取max报错
			
    之前直接对timestamp类型做max操作, select id,max(updatetime) updatetime from his.tag group by id; 结果查询的结果有的显示为1 ...
    
			
    6. 
						
  6. 重写NSArray与NSDictionary的descriptionWithLocale方法
			
    重写NSArray的descriptionWithLocale方法: NSArray+log.h #import <Foundation/Foundation.h> @interface  ...
    
			
    7. 
						
  7. Android kernel LOGO的更换方法
			
    [从制作logo到LCD显示或者VGA显示logo] 1.制作logo的方法: 首先选择一个自己喜欢的图片,然后通过GIMP软件将该图片保存为.png格式, 变换方式这个就不说了(very easy) ...
    
			
    8. 
						
  8. python 语句：条件、循环、break、continue...
			
    1. 条件语句 执行条件:判断条件"成立时(非零),则执行后面的语句,而执行内容可以多行,以缩进来区分表示同一范围. [Python程序语言指定任何非0和非空(null)值为true,0 或 ...
    
			
    9. 
						
  9. asp.net core源码飘香：Configuration组件
			
    简介: 这是一个基础组件,是一个统一的配置模型,配置可以来源于配置文件(json文件,xml文件,ini文件),内存对象,命令行参数,系统的环境变量又或者是你自己扩展的配置源,该组件将各个配置源的数据 ...
    
			
    10. 
						
  10. 事件驱动的Python实现
			
    EventManager事件管理类实现,大概就百来行代码左右.如果有不了事件驱动的工作原理的可以看前一篇<事件驱动的简明讲解> # encoding: UTF-8 # 系统模块 from  ...
    
			
    11.