AngularJS select詳細用法

2021-07-09 16:34:39 字數 1780 閱讀 2559

select是 angularjs 預設的一組directive。下面是其官網api doc給出的用法:angularjs:select

大意是,select中的ngoption可以採用和ngrepeat指令類似的迴圈結構,其data source可以是array或者是object。針對兩種data source又有衍生的好幾種用法。但是官網的例子實在是太少了。

下面是針對幾個不太容易理解的用法的例子。

先上controller

function

selectctrl

($scope)

, , ];

}

usage: label for value in array

ng-model="selected"

ng-options="m.productname for m in model">

value="">-- 請選擇 --option>

select>

效果:

usage中的 value 也就是 ng-options 中的 m,而 m 是陣列model的乙個元素,它是乙個變數

usage中的 label 也就是 ng-options 中的m.productname, 其實就是乙個 angularjs expression

usage: label for value in array

ng-model="selected"

ng-options="(m.productcolor + ' - ' + m.productname) for m in model">

value="">-- 請選擇 --option>

select>

效果

可以看到,usage 中的 label 可以根據需求拼接出不同的字串

usage: label group by group for value in array

ng-model="selected"

ng-options="(m.productcolor + ' - ' + m.productname) group by m.maincategory for m in model">

value="">-- 請選擇 --option>

select>

效果

這裡使用了group by,通過$scope.model中的maincategory字段進行分組

usage: select as label for value in array

ng-model="selected"

ng-options="m.id as m.productname for m in model">

value="">-- 請選擇 --option>

select>

效果

這種用法也是select指令最複雜的一種。從效果中可以看出,usage中select的作用就是重新定義ng-model的值。在這裡,ng-model等於m.id,當ng-model發生改變的時候,得到的是m.id的值

AngularJS select選擇框初始化問題

angularjs 中的select往往會遇到選擇框沒有初始化的問題,表現形式就是一開始為空,但是選擇後空白就消失。十分難看。比如說如下的select 如果不初始化的話就會遇到如上所述的問題。step.datasource datasources 0 這樣ng model就有乙個初始化的值,不會有空...

angularJs select框用法總結

我們都知道 angularjs中最大的乙個特性就是雙向繫結 scope 和 ng model的搭配使用.要顯示的input框的值 實際傳給後台的值 我們把它設定成隱藏域 select框裡將要選擇的值 我們要做的是 把下拉框裡的值傳到input框裡 例如 orgs 組織 ng options org....

angularJS select2 多選功能

1.form select2 help 指令引入select2標籤 2.multiple 多選標籤 3.ng change 用於級聯效果,看業務需求而定 4.ng repeat 介面非同步載入下拉框資料 shoppedata 5.ng seleted 設定選中狀態 6.value,儲存後,後台拿到的...