1、对于文本框,只需设置 ng-model 属性就可以实现双向绑定,如:
<input type="text" class="form-control" ng-model="item">
这样在js中就可以通过 $scope.item来实现双向绑定。
说明:对于文本框,通过$scope.item 获取时,自动会除去空格,相当于在原始值基础上调用了trim()方法。
这样我们在获取数据时,不需要在判断和去空格时。
2、单选按钮组的绑定方式,如:
<label> <input type="radio" name="optionsRadios" value="single" ng-model="seltype" >单选题</label>
<label> <input type="radio" name="optionsRadios" value="muti" ng-model="seltype">多选题</label>
在js中的代码:
1)初始化设置被选中的按钮: $scope.seltype = "muti" 这样初始时第2个radio就会被选中
2)获取被选中的按钮
如果 $scope.seltype 的值为 single ,则是第1个radio被选中。
如果 $scope.seltype 的值为 muti,则是第2个radio被选中。
3、复选框checkbox的绑定方式
<input type="checkbox" ng-model="selok">选中
在js中的代码
1)初始化选中:$scope.selok = true;
2)判断checkbox是否被选中:
如果 $scope.selok 返回true,则被选中;否则没有被选中
注意:这里的selok一定要是真的布尔值,不能是其它值。比如 $scope.selok= 12 或是其它非空数据,都无效。一定必须是true 这个值。
需要说明的是,如果绑定的数据是一个简单数据(非js对象),而且设置在$rootScope中。
当在html中用ng-model引用时,初始化没有问题,可以获得rootScope中的值,但是当表单数据发生变化时,实际是新设置了一个$scope中的数据,
对当前的$rootScope没有影响。 如果需要对rootScope值可用,应该绑定成一个js对象,而不是简单数据类型。