文档章节

AngularJS中在<input type="checkbox" ng-model="ceshi" >与$scope.ceshi 那些事

wlc534
 wlc534
发布于 2017/09/06 17:47
字数 282
阅读 19
收藏 0

问题描述:点击checkbox,左侧框中数据全部出现在右侧框或者消失。

直接绑定<input type="checkbox" ng-model="ceshi" > 通过自带指令ng-model绑定ceshi。在controller中$scope.ceshi绑定。通过ng-model="ceshi" 改变做相应的操作。问题是console.log($scope.ceshi);控制台打印出是undefined。

<input type="checkbox" ng-model="ceshi" >{{ceshi}}  绑定是同一变量,

然而 console.log( $scope.ceshi);是undefined

 

 

解决方案:

把状态绑定到对象的属性上  $scope.fromData={"ceshi":false};

<script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Value1:
    <input type="checkbox" ng-model="checkboxModel.value1">
  </label><br/>
  <label>Value2:
    <input type="checkbox" ng-model="checkboxModel.value2"
           ng-true-value="'YES'" ng-false-value="'NO'">
   </label><br/>
  <tt>value1 = {{checkboxModel.value1}}</tt><br/>
  <tt>value2 = {{checkboxModel.value2}}</tt><br/>
 </form>
<input type="checkbox"
       ng-model="string"
       [name="string"]
       [ng-true-value="expression"]
       [ng-false-value="expression"]
       [ng-change="string"]>

 

Arguments

Param Type Details
ngModel string

Assignable AngularJS expression to data-bind to.

name

(optional)

string

Property name of the form under which the control is published.

ngTrueValue

(optional)

expression

The value to which the expression should be set when selected.

ngFalseValue

(optional)

expression

The value to which the expression should be set when not selected.

ngChange

(optional)

string

AngularJS expression to be executed when input changes due to user interaction with the input element.

 

https://my.oschina.net/LinBandit/blog/607306 

https://book.douban.com/subject/20277919/discussion/54472631/

https://segmentfault.com/q/1010000004462678 

http://blog.csdn.net/qq_17371033/article/details/49248791 

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 4
博文 40
码字总数 37684
作品 0
几个AngularJS中的矛盾

1、AngularJS的模板绑定机制好像和其$http服务也有一定关系,如果用jQuery Ajax的返回值赋给$scope的作用域变量,整个绑定显示的节奏慢一个事件,神器果然麻烦啊。 2、对hidden input做绑定好...

杨太化
2015/01/19
0
0
AngularJs双向数据绑定

简介 单项数据绑定:最简单的理解如果我们有一个input想要获取里面的值负值给一个变量,那么我们需要给inptu绑定一个id再通过id获取input再通过html或者text获取到值给一个变量,那么变量值改...

全村的希望iOS
07/05
0
0
第217天:深入理解Angular双向数据绑定的原理

一、理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。 那么什么是双向绑定,下面...

半指温柔乐
04/10
0
0
AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海
2015/02/06
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

bat强制启用宏

运行bat文件后,将宏的安全等级设为低,达到启用宏的目的。 REM 这个文件将提供用户快速设置Excel宏的安全等级@ECHO OFFCLS:cmd4REG ADD "HKEY_CURRENT_USER\Software\Mi...

tedzheng
3分钟前
0
0
流,用声明性的方式处理数据集 - 读《Java 8实战》

引入流 Stream API的代码 声明性 更简洁,更易读 可复合 更灵活 可并行 性能更好 流是什么? 它允许以声明方式处理数据集合 遍历数据集的高级迭代器 透明地并行处理 简短定义:从支持数据处理...

yysue
5分钟前
0
0
postman发送json格式的post请求

postman发送json格式的post请求 在地址栏里输入请求url:http://127.0.0.1:8081/getmoney 选择“POST”方式, 在“headers”添加key:Content-Type , value:application/json 点击"body",''ra...

两广总督bogang
12分钟前
0
0
Javascript将html转成pdf,下载(html2canvas 和 jsPDF)

最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-html-to-pdf html2ca...

孟飞阳
12分钟前
0
0
pureftp源码编译及设定

--- use for RHEL 567 and Ubuntu 1604 1. download pureftpd wget http://download.pureftpd.org/pub/pure-ftpd/releases/pure-ftpd-1.0.47.tar.bz2 2. install gcc #apt-get install -y li......

zzimac
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部