AngularJS与单选框及多选框的双向动态绑定
AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示:
<input type="text" ng-model="topic.title" />
只需要用ng-model 与 $scope 中的属性对应,即实现了type=”text” 的双向动态绑定。当 <input type="radio" /> 及 <input type="checkbox" /> 时情况略有不同:
1. <inputtype="radio" />
通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。
2. <input type="checkbox" />
通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。
但是理想跟现实总是相差太多,在实际操作过程中还是出现了问题。应该是ng-repeat中scope作用域的问题。
经过一番搜索、调试,自己终于将此问题解决了,效果图如下:
核心源码
js
Html
参考文献:
Angularjs中scope与rootscope区别及联系
scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。下面用实例详细的说明一下。
1.js代码
2.html代码
3.显示结果
I set the global variable.this is test
1,get global variable .this is test
2,get global variable .this is test
由结果可以看出来,$rootScope.name设置的变量,在所有controller里面都是可以直接用{{$root.name}}来显示的,很强大。那当然也可以赋值给scope.
- 点赞
- 收藏
- 关注作者
评论(0)