ng-model 绑定checkbox的值

最新推荐文章于 2021-06-29 23:52:55 发布
最新推荐文章于 2021-06-29 23:52:55 发布
阅读量487 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/3101047/blog/1573553
本文探讨了AngularJS中ng-model与ng-if指令的使用方式，特别是当两者结合使用时如何正确地绑定checkbox的状态。文章通过示例说明了作用域查找机制以及如何避免常见错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

ng-model 绑定checkbox的值

  <input type="checkbox"ng-change="checkAll()"ng-model="check.isCheckAll">

check.isCheckAll 的值会跟着改变

      <input type="checkbox" ng-change="checkAll()" ng-model="isCheckAll">

isCheckAll 的值不跟着改变

原因 input父级有一个ng-if 它有自己的作用于 如果ng-if里面有何controller一样的变量 ng-if里面的数据绑定会绑定到本身的作用于 而不会是controller

第一种值会改变是因为ng-if在自己的作用域找到 check.isCheckAll会自动到父级controller里面找

转载于:https://my.oschina.net/u/3101047/blog/1573553

angularJs复选框checkbox选中进行ng-show显示隐藏的方法
10-17
`ng-model`用于双向数据绑定，它将表单控件的值与AngularJS应用中的模型数据关联起来。在复选框中，`ng-model`的值通常是一个布尔值，表示复选框是否被选中。然而，在这个示例中，我们使用`ng-true-value`和`ng-...
ng-options和ng-checked在表单中的高级运用(推荐)
10-20
这是最推荐的用法，ng-options可以根据对象的属性生成选项，同时通过ng-model可以轻松获取或设置选中的值。例如，在年级和班级的选择场景中，可以选择年级后动态加载对应的班级。这种方式不仅代码简洁，易于维护，...
AngularJS中checkbox与动态ng-model的结合
申谊的博客
06-22 8024
checkbox的样式方案1：css3自定义checkbox，IE9不兼容html：&lt;div class="col-xs-12" &gt; &lt;label for="chk" class="chkbox" ng-class="{'focus on':checked,'focus':!checked}"&gt; &lt;span clas
ng-model 绑定checkbox 取不到值?
weixin_34319640的博客
11-10 299
<input type="checkbox"ng-change="checkAll()"ng-model="check.isCheckAll"> <input type="checkbox" ng-change="checkAll()" ng-model="isCheckAll"> check.isCheckAll 的值会跟着改变 ,而 isCheckAll 的值不跟着改...
Angular中，select的ng-model深度绑定对象不更新选择项的解决办法
大连 云鹏
11-27 1163
这个问题困扰了一下午 查看官方的API中描述，ng-model是对比对象引用，当对象引用发生了变化才会触发change 而我之前是因为加有除了数据源意外的数据，所以试用了ng-repeat，以及用$index来做select的value，但是更新scope.xxxModel.data的时候，select选择框的选项却不跟着更新 解决办法如下 使用ng-options来生成o...
复选框 ng-checked 和 ng-model 的区别 angular.js
weixin_33973609的博客
06-26 605
2019独角兽企业重金招聘Python工程师标准>>> ...
<input type="checkbox" ng-model="row._select" style="margin-top: -12px;" class="ng-valid ng-dirty ng-valid-parse ng-empty ng-touched">定位这个然后点击
最新发布
05-13
这里，`ng-model`的值是"row._select"，可以作为属性选择器的依据。 可能的定位方式包括：1. CSS选择器：`input[ng-model='row._select']` 2. XPath：`//input[@ng-model='row._select']` 需要注意的是，如果页面...
AngularJS基础 ng-if 指令用法
10-21
<input type="checkbox" ng-model="myVar" ng-init="myVar = true"> <div ng-if="myVar"> <h1>Welcome <p>Welcome to my home. 当复选框取消选中时 DIV 元素将移除。 当重新选中复选框，DIV 元素会重新...
AngularJS基础 ng-readonly 指令简单示例
10-21
ng-model指令用于绑定数据模型到视图，它将表单控件的值与应用的数据模型进行绑定。当ng-readonly的表达式值变化时，对应绑定的输入框或文本区域的可编辑状态就会自动更新。 举一个简单的例子，当我们需要在用户...
html input ng model,AngularJS中在<input type="checkbox" ng-model="ceshi" >与$scope.ceshi 那些事...
weixin_42172204的博客
06-29 173
问题描述：点击checkbox，左侧框中数据全部出现在右侧框或者消失。直接绑定 通过自带指令ng-model绑定ceshi。在controller中$scope.ceshi绑定。通过ng-model="ceshi" 改变做相应的操作。问题是console.log($scope.ceshi);控制台打印出是undefined。{{ceshi}} 绑定是同一变量， 然而console.log( $...
Angular中Checkbox列表的数据双向绑定
weixin_43263355的博客
12-03 2621
概要 Angular数据的双向绑定，要使用[(ngModel)]指令。但是，在使用过程中，我们不难发现，该指令在对CheckBox列表做双向数据绑定时候，并不是很好用。 因为Angular中的[(ngModel)]无法像Vue中的v-model指令那样，接收一个数组。当前CheckBox的value值存在于数组中，则当前CheckBox处于选中状态，反之，处于未选中状态。 对于CheckBox列表，一般后端传给前端的是一个选中项的Id列表，如果我们直接使用[(ngModel)]进行绑定，则需要对列表数据进行
checkbox的ng-model和ng-change的多选的练习
每天都是人生巅峰
05-10 1196
用到了ng-model和ng-change,和ng-repeat，vm就是如此便利。 简单树效果。 <!DOCTYPE html> <html><head> <meta charset="utf-8"> <script src="angular.js"></script> </head><body ng-app="myApp"> <div ng-controller="m
AngularJs checkbox绑定
天马3798
01-20 1万+
一、AngularJs中关于checkbox的双向绑定 <input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string"> 1.默认ng-model绑定返回的都是true或false 选择分类： 第
angularjs中的复选框checkbox
热门推荐
u010705091的专栏
09-07 1万+
My cars:     Check all     Volvo     Ford     Mercedes     点击 "Check all" 选择所有的车。 当点击Check all按钮时，ng-model="all"中绑定的all的值变为为true，相应的ng-checked=“all”中的all值也都变为true，即其他按钮都被选中。
angular checkbox ng-model
Sensation_cyq的博客
08-10 870
遇到的问题angular 里面的checkbox 的使用 当$scope.das=true or false 时 不起作用 $scope.das={ value:true } 为对象时才起作用 html> html lang="en"> head> meta charset="UTF-8"> title>title> head> s
angularjs checkbox双向绑定
programmeryu的博客
01-17 7583
1.首先有这样一个对象，这个对象我不知道里面具体的属性和属性值，使用checkbox如何实现双向绑定？ { "title":true, "tel":false, "price":true, "info":true } 1>html 分词字段： 所有字段
vue中checked结合v-model
nightwishh的博客
05-07 4036
复习了下vue的todolist记录下checked结合v-model加深印象 <p>未完成</p> <ul id="ul1"> <li v-if="!item.pd" v-for="item in list"> <input type="checkbox" v-model="item.pd">{{item.text}} <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值