ng實(shí)現(xiàn)簡單的select

<div ng-controller="ngSelect"><select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData"><option value="">請選擇</option></select> </div> var app = angular.module("app",[]); app.controller("ngSelect",function($scope){var vm = $scope.vm = {};//數(shù)組對象用來給ng-options遍歷vm.optionsData = [{title : "angularJs"},{title : "emberJs"},{title : "backboneJs"},{title : "knockoutJs"}];})

給ng-options自定義option的value值

<select ng-model="vm.selectVal" ng-options="o.id as o.title for o in vm.optionsData" ng-change="selectChange()"><option value="">請選擇</option> </select>

添加了id屬性作為option的value
你可能會在頁面視圖看到option生成的value為0,1,2,3,是因?yàn)閍ngular會自動(dòng)添加索引為value的值
讓我們來個(gè)ng-change事件監(jiān)控來看看

vm.optionsData = [{id : 4543,title : "angularJs" },{id : 546,title : "emberJs" },{id : 456,title : "backboneJs" },{id : 75,title : "knockoutJs" }];$scope.selectChange = function(){//添加了ng-change事件來試試id值的輸出 console.log(vm.selectVal); }

在線演示

轉(zhuǎn)載于:https://www.cnblogs.com/leejersey/p/4663949.html

總結(jié)

以上是生活随笔為你收集整理的angular实现select的ng-options的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。