Angulajs 表单的ng-model绑定

一、对于文本框，只需设置 ng-model 属性就能够实现双向绑定，如：

<input type="text" class="form-control" ng-model="item">

这样在js中就能够经过  $scope.item来实现双向绑定。

 说明：对于文本框，经过$scope.item 获取时，自动会除去空格，至关于在原始值基础上调用了trim()方法。

这样咱们在获取数据时，不须要在判断和去空格时。

 

二、单选按钮组的绑定方式，如：

<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被选中。

 

三、复选框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对象，而不是简单数据类型。