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

上一篇:理解CSS前景色和透明度


下一篇:浅谈负载均衡SLB、CLB和综合应用