Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>測試 AngularJS select 的 ng-options 用法 - Will 保哥 - The Will Will Web</title>
</head>
<body ng-controller="MySelectCtrl">
  
  <b>基本下拉選單</b>：<code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br>
  <select ng-model="Select1" ng-options="m.ProductName for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
  
  <hr/>
  
  <b>自訂下拉選單顯示名稱</b>：<code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br>
  <select ng-model="Select2" ng-options="(m.ProductColor + ' - ' + m.ProductName) for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
  
  <hr/>
  
  <b>使用 &lt;optgroup&gt; 依據特定欄位群組下拉選單，並自訂顯示名稱</b>：<code>label</code>  <strong><code>group by</code></strong> <code>group</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br>
  <select ng-model="Select3" ng-options="(m.ProductColor + ' - ' + m.ProductName) group by m.MainCategory for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
  
  <hr/>
  
  <b>自訂 select 的 ngModel 的值：</b><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br/>
  <select ng-model="Select4" ng-options="m.id as m.ProductName for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
   
  <hr/>
  
  <b>自訂 select 的 ngModel 的值，並且自訂顯示名稱：</b><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br/>
  <select ng-model="Select5" ng-options="m.id as (m.ProductColor + ' - ' + m.ProductName) for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
   
  <hr/>
  
  <b>自訂 select 的 ngModel 的值，使用 &lt;optgroup&gt; 依據特定欄位群組下拉選單，並自訂顯示名稱：</b><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code>
  <br/>
  <select ng-model="Select6" ng-options="m.id as (m.ProductColor + ' - ' + m.ProductName) group by m.MainCategory for m in Model">
    <option value="">-- 請選擇 --</option>
  </select>
   
  <hr/>
  
  
  <p>
  以下是 AngularJS API 的 ngOptions 參數說明：
    <a href="http://docs.angularjs.org/api/ng.directive:select">http://docs.angularjs.org/api/ng.directive:select</a>
  </p>
<ul class="parameters">
<li><code ng:non-bindable="">ngOptions<i>(optional)</i> – {comprehension_expression=} – </code>
<p>in one of the following forms:</p>
​
<ul>
<li>for array data sources:
<ul><li><code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>label</code>  <strong><code>group by</code></strong> <code>group</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>group by</code></strong> <code>group</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li></ul></li>
<li>for object data sources:
<ul><li><code>label</code> <strong><code>for (</code></strong><code>key</code> <strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for (</code></strong><code>key</code> <strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>label</code> <strong><code>group by</code></strong> <code>group</code> <strong><code>for (</code></strong><code>key</code><strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>group by</code></strong> <code>group</code>
<strong><code>for</code> <code>(</code></strong><code>key</code><strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li></ul></li>
</ul>
​
<p>Where:</p>
​
<ul>
<li><code>array</code> / <code>object</code>: an expression which evaluates to an array / object to iterate over.</li>
<li><code>value</code>: local variable which will refer to each item in the <code>array</code> or each property value
 of <code>object</code> during iteration.</li>
<li><code>key</code>: local variable which will refer to a property name in <code>object</code> during iteration.</li>
<li><code>label</code>: The result of this expression will be the label for <code>&lt;option&gt;</code> element. The
<code>expression</code> will most likely refer to the <code>value</code> variable (e.g. <code>value.propertyName</code>).</li>
<li><code>select</code>: The result of this expression will be bound to the model of the parent <code>&lt;select&gt;</code>
 element. If not specified, <code>select</code> expression will default to <code>value</code>.</li>
<li><code>group</code>: The result of this expression will be used to group options using the <code>&lt;optgroup&gt;</code>
 DOM element.</li>
</ul></li>
</ul>  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
willhpro
0viewers