angular 的 select 中 ng-options 設(shè)置默認值

omgdog 發(fā)布于2019-08-20 12:29 / 3288人閱讀

摘要：的中設(shè)置默認值在開發(fā)的后臺系統(tǒng)中，經(jīng)常需要對后臺數(shù)據(jù)進行修改，而在修改數(shù)據(jù)的過程中，若頁面中有下拉框，需要讓其選中原來的數(shù)據(jù)，即中需要設(shè)置默認值。默認值設(shè)置方法在中使用綁定數(shù)據(jù)，在對應(yīng)的中定義全局數(shù)據(jù)，并為其賦值，該值即為的默認值。

angular 的 select 中 ng-options 設(shè)置默認值

在AngularJS 開發(fā)的后臺web系統(tǒng)中，經(jīng)常需要對后臺數(shù)據(jù)進行修改，而在修改數(shù)據(jù)的過程中，若頁面中有select下拉框，需要讓其選中原來的數(shù)據(jù)，即select中需要設(shè)置默認值。

默認值設(shè)置方法：

在select中使用ng-model綁定數(shù)據(jù)myColor，

在對應(yīng)的controller中定義ng-model全局數(shù)據(jù)$scope.myColor，并為其賦值，該值即為select的默認值。

代碼如下：

angular.module("myApp", [])
  .controller("MyController", ["$scope"], function($scope) {
    $scope.colors = ["black", "white", "red", "blue", "yellow"];
    
    $scope.myColor = $scope.colors[2];
  })

顯示效果：

說明：該文檔參考angular官方api

GPU云服務(wù)器云服務(wù)器 select默認值 input設(shè)置默認值 js函數(shù)設(shè)置默認值 js框中如何默認值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81008.html

相關(guān)文章

angular.js ng-options的正確打開姿勢

摘要：直接上代碼商品其中后面的為的值，用于顯示選項名稱。請求失敗執(zhí)行代碼直接上代碼商品: 其中 track by 后面的為option的value值， g.name用于顯示選項名稱。 var app = angular.module(myApp, []); app.controller(goodsCt...

Profeel 2019-08-21 18:34 評論0 收藏0
AngularJS: 使用ng-option生成下拉框并在controller調(diào)用

摘要：寫的時候碰到很多問題，因為剛開始用，寫法思路還是和寫相似，導致與在一個生成下拉框時花費了個小時才最終搞定。不自覺的用自己所熟悉的方式思考問題，付出了慘重的代價實在是不能對jquery的ajax方法和基于頁面dom的各種取值、傳值方法滿意（雖然jquery已經(jīng)解救過我一次了），剛好手上這個項目用jquery的方法寫了一半，決定試試很久以前自學的angularJS，把現(xiàn)在項目中jquer...

huaixiaoz 2019-08-19 14:38 評論0 收藏0
angularjs初識

摘要：總的來說，收獲很大。這里這里就以一些常用的標簽談?wù)勚械幕A(chǔ)知識。然后還有一個表示記錄的索引號，從開始。已經(jīng)用這個數(shù)組的值替他們分好了組了，是不是感覺很強大，還有很多強大的地方等著我們?nèi)W習，掌握它，還有更強大的等著我們。周三的時候跟著老師簡單的入門了angularjs，然后去圖書館找了一本《Angularjs實戰(zhàn)》來看了看，雖然這本書網(wǎng)上的評價不太高，但對于初學者的我來說還是不錯的，...

tanglijun 2019-08-23 11:49 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應(yīng)的功能...

Jason 2019-08-23 11:25 評論0 收藏0
Angular實現(xiàn)的網(wǎng)上商城SKU組合查詢組件

摘要：最近學習了，正好又完整的做了一個電商網(wǎng)站，就利用實現(xiàn)了一個組合查詢組件，首先介紹是個什么東西。庫存量單位，即庫存進出計量的單位，可以是以件盒托盤等為單位。在服裝鞋類商品中使用最多最普遍。最近學習了angular，正好又完整的做了一個電商網(wǎng)站，就利用angular實現(xiàn)了一個sku組合查詢組件，首先介紹sku是個什么東西。sku=stock keeping unit(庫存量單位)，sku...

mcterry 2019-08-21 10:42 評論0 收藏0