angular 表单元素的使用总结

工作中form表单元素最常用的是input，问题没有太多，现在总结下select ，radio组，checkbox的使用

1 select

　　常用的使用方式，如下
　　var Cityis = [{id:0,name:'上海'},{id:1,name:'北京'},{id:2,name:'武汉'}]

　　<select ng-model="postData.allCities.mycity" ng-options="city.id as city.name for city in Cities"></select>
　　通过ng-options 实现对Cities中的元素的遍历，展示到option中。该例中，for标签后的city 作为遍历的单个对象元素({id:0,name:'上海'})，city.id会作为option的value，as标签后面的city.name作为option展示的文本部分。
　　通过ng-model绑定元素，实现哪个option被选中。

　　有时需要默认显示“请选择”的情况，所以，指定默认的绑定字段，如$scope.postData.allCities.myCity = ""(让‘请选择‘被选择）;该情况下，select要改变写法

　　<select ng-model="postData.allCities.mycity" >
　　　　<option value="">请选择</option>
　　　　<option ng-value="item.id" ng-repeat="item in Cities" ng-bind="item.name"></option>
　　</select>

　　备注：ng-value---》当这个元素被选中的时候，设置这个元素的value值到ngModel绑定的字段。当需要使用ng-repeat来动态生成radio列表/select的option的时候，ngValue是很有用处的。

2  radio组

　　常用的使用方式，如下　

　　$scope.select_otps = {
　　　　companyType:[{id:0,t:'客户公司'},{id:1,t:'律师事务所'},{id:2,t:'侦探公司'},{id:3,t:'供应商'},{id:4,t:'未知'},{id:5,t:'全部'}],
　　}

　　<label ng-repeat="item in select_otps.companyType">
　　　　<input type="radio" name="companyType" value="{{item.id}}" ng-model="postData.corType" ng-value="{{item.id}}"/><span ng-bind="item.t"></span>
　　</label>

　　ng-value: 当按钮选中时，绑定值到ngModel的指定的字段。 当属性值和ngModel相同时，则为选中状态。

　　ng-change： 按钮状态变化时，将被执行。

　　另外，也可以在checkbox和radio中使用ng-checked指令,当表达式为true时，在checkbox和radio元素上添加checked属性，也就是选中状态。（ng-checked="item.id==0?true:false"）

3  checkbox

　　常用的使用方式，如下

<input type="checkbox"
       ng-model=""
       [name=""]
       [ng-true-value=""]
       [ng-false-value=""]
       [ng-change=""]>

　　  ng-true-value: 按钮选中时，绑定到ng-model的值。 当属性值和ng-model相同时，则为选中状态。

　　  ng-false-value: 按钮未选中时，绑定到ng-model的值。

　　  ng-change： 按钮状态变化时，将被执行。