文档章节

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

wlc534
 wlc534
发布于 2017/09/06 17:47
字数 282
阅读 67
收藏 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
粉丝 6
博文 84
码字总数 143947
作品 0
私信 提问
数据模型被外部JS修改,ng-repeat生成的checkbox无法绑定

最近在尝试用Angular,发现Angular中数据模型,被外部的JS修改时,Angular拿不到被修改后的数据。 如我的input绑定了ng-model,然后我在控制台自己写JS把这个input的值改了,在Angular里面,...

苏甘霖
2015/12/17
1K
2
几个AngularJS中的矛盾

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

杨太化
2015/01/19
0
0
Angular 1 和 Angular 2 集成:无缝升级的方法

已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。 摘要 好消息。 我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用 你可以...

oschina
2015/08/27
8.5K
13
AngularJs双向数据绑定

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

全村的希望iOS
07/05
0
0
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
67.4K
7

没有更多内容

加载失败,请刷新页面

加载更多

Netty 简单服务器 (三)

经过对Netty的基础认识,设计模型的初步了解,来写个测试,试试手感 上篇也说到官方推荐我们使用主从线程池模型,那就选择这个模型进行操作 需要操作的步骤: 需要构建两个主从线程组 写一个服务器...

_大侠__
13分钟前
1
0
day02:管道符、shell及环境变量

1、管道符:"|" 用于将前一个指令的输出作为后一个指令的输入,且管道符后面跟的是命令(针对文档的操作):cat less head tail grep cut sort wc uniq tee tr split sed awk等) [root@localho...

芬野de博客
23分钟前
8
0
Kubernetes系列——Kubernetes 组件、对象(二)

一、Kubernetes 组件 介绍了Kubernetes集群所需的各种二进制组件。 Master 组件 Master组件提供集群的管理控制中心。Master组件可以在集群中任何节点上运行。但是为了简单起见,通常在一...

吴伟祥
33分钟前
12
0
Flink-数据流编程模型

1、抽象等级 Flink提供了不同级别的抽象来开发流/批处理应用程序。 1) 低层级的抽象 最低层次的抽象仅仅提供有状态流。它通过Process函数嵌入到DataStream API中。它允许用户自由地处理来自一...

liwei2000
51分钟前
6
0
Java开发Swing实战JFrame和JTabbedPane容器的用法详细解析

概述: 项目是一个桌面程序,涉及标签和按钮组件、布局管理器组件、面板组件、列表框和下拉框组件等组件,以及Swing事件处理机制。 下面先从最基础的界面开始。 /** * @author: lishuai * @...

金铭鼎IT教育
56分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部