AngularJS学习（二）——表单

（一）<select>选择框 ng-options和ng-repeat

ng-repeat:

mycar=[
              {brand:"Benz",name:"奔驰"},
              {brand:"BMW",name:"宝马"},
              {brand:"Audi",name:"奥迪"}
]

<select ng-model="selectCar">
       <option ng-repeat="x in mycar" value="{{x.name}}">{{x.brand}}</option>
</select>
<p>Select Car:{{selectCar}}</p>

<!-- selectCar 是一个值，下拉框中显示的是x.brand,当实际获取的值是x.name-->

 

ng-options

（1）数组作为数据源

html：
<select ng-model="selectCar" ng-options="x.brand  for  x  in mycar" >
</select>
<!-- selectCar 是一个对象-->

<p>Select Car:{{selectCar.brand}}  {{selectCar.name}}</p>

mycar=[“Benz”，“Audi”，”BMW”]

<select ng-model="selectCar" ng-options="x  for  x  in mycar" >
</select>
<p>Select Car:{{selectCar }}</p>

（2）对象作为数据源

cars={
              Benz:{color:"Red",name:"奔驰"},
              BWM:{color:"Green",name:"宝马"},
              Audi:{color:"Blue",name:"奥迪"}
       }

<select ng-model="selectCar" ng-options="x  for  (x,y)  in mycar" >
<!--(x,y)中是x是属性，y是属性的值，y也有可能是一个对象-->
</select>
<p>Select Car:{{y.brand}}  {{y.name}}</p>

 

（二）表格

（1）ng-disabled指令：直接绑定应用程序数据到HTML的disabled属性

<div class="container" ng-init="mySwitch=true">
       <p>
              <button ng-disabled="mySwitch">Click me</button>
       </p>
       <p>
              <input type="checkbox" ng-model="mySwitch"/>禁用
       </p>
</div>
<!--若checkbox被勾选了，mySwitch的值为true，否则为false，若mySwitch的值为true，则Click me按钮是无法点击的-->

 

（2）ng-show指令：若ng-show的值为true，则包含ng-show的标签元素的内容显示，否则不显示

（3）ng-hide指令：与ng-show相反，若ng-hide的值为true，则隐藏

（4）ng-click指令：定义点击事件

（5）ng-switch：与JS的switch函数相同

         ng-switch-when：相当于case