如圖所示,完成一個下拉框
image.png
image.png
靜態頁
<select class="form-control" ng-model="fruit" ng-init="fruit='0'">
<option value="0">-選項-</option>
<option value="1">蘋果</option>
<option value="2">香蕉</option>
<option value="3">葡萄</option>
<option value="4">西瓜</option>
</select>
我們可以ng-model雙向綁定一個變量,ng-init初始化一個0,下拉框初始化就默認是value為0的選項
動態獲取數據
這里有兩種方式
1、ng-repeat
<select class="form-control" ng-model="fruit" ng-init="fruit='0'">
<option value="0">-選項-</option>
<option ng-repeat="f in fruitList" value="{{f.values}}">{{f.name}}</option>
</select>
js中$scope.fruitList
是請求服務器獲取的數據
2、ng-option
<select class="form-control" ng-model="fruit" ng-init="fruit='0'"
ng-options="f.values as f.name for f in fruitList">
<option value="0">-選項-</option>
</select>
關于ng-option更多參考
http://www.jb51.net/article/67909.htm
運行效果
http://sandbox.runjs.cn/show/nhi8ubrb