《我的Angular入坑記》——ng-options的使用
阿新 • • 發佈：2019-01-13
ng-options 指令用於使用 <options> 填充 <select> 元素的選項，當select中一個選項被選擇，該選項將會被繫結到ng-model。
ng-options 指令使用陣列或物件來填充下拉列表，多數情況下與 ng-repeat 指令一起使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> </head> <body> <div ng-app="hd" ng-controller="ctrl"> <select ng-options="v.value as v.name for v in data" ng-model="city"> <option value="">請選擇城市</option> </select> {{city}} </div> <script> var m = angular.module('hd', []); m.controller('ctrl', ['$scope', function ($scope) { $scope.city = 'beijing'; $scope.data = [ {name: '廣東', value: 'guangdong'}, {name: '北京', value: 'beijing'}, {name: '南京', value: 'nanjing'}, ]; }]); </script> </body> </html>
其中v.value的值被繫結在option的value屬性裡面，v.name則賦值給了option標籤裡的內容