AngularJS使用ng-options指令實現(xiàn)下拉框
ng-option指令使用很簡單,只需要綁定兩個屬性:
一個是ng-model用于獲取選定的值;
另一個是ng-options用于確定下拉列表的元素數(shù)組。
1、問題背景
一般情況下,select下都會有option,但是AngularJS中有指令ng-options,就可以實現(xiàn)select下拉框
2、實現(xiàn)源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之下拉框(方式一)</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app = angular.module("selApp",[]);
app.controller("selCon",function($scope){
$scope.options = ["第一季度","第二季度","第三季度","第四季度"];
});
</script>
</head>
<body>
<div ng-app="selApp" ng-controller="selCon">
<select ng-model="selectedName" ng-options="x for x in options" style="width: 180px;">
</select>
</div>
</body>
</html>
3、問題說明
<select> <option></option> </select>
利用指令ng-options,可以省略<option></option>

以上所述是小編給大家介紹的AngularJS使用ng-options指令實現(xiàn)下拉框,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Angular2使用vscode斷點調(diào)試ts文件的方法
本篇文章主要介紹了Angular2使用vscode斷點調(diào)試ts文件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
angular5 httpclient的示例實戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-04-04
AngularJS中update兩次出現(xiàn)$promise屬性無法識別的解決方法
最近在工作中用AngularJS中update了兩次之后發(fā)現(xiàn)$promise屬性無法識別了,后來通過查找相關(guān)的資料終于解決了,想著記錄下方便自己或者有需要的朋友,所以本文主要介紹了AngularJS中update兩次出現(xiàn)了$promise屬性無法識別的解決方法,需要的朋友可以參考借鑒。2017-01-01
Angular實現(xiàn)較為復(fù)雜的表格過濾,刪除功能示例
這篇文章主要介紹了Angular實現(xiàn)較為復(fù)雜的表格過濾,刪除功能,結(jié)合實例形式分析了AngularJS針對表格的排序、查詢匹配、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12

