Angulajs 表单的ng-model绑定

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