工作中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: 按钮状态变化时,将被执行。