選擇選項內的角度切換

我希望[數據表示格式]適用於[下拉框]。我需要在下拉框中顯示「父級」，但我需要用「選項卡」來顯示「子級」，以顯示父子關係。選擇選項內的角度切換

$ scope.itemlist會爲了準備（即parenta，childa1，childa2，parentb，childb1，childb2）

的HTML：

<div ng-controller="MyCtrl"> 
<h1>-- Data Presentation Format --</h1> 
<ul> 
    <li ng-repeat="item in itemlist"> 
     <div ng-switch on="item[1]"> 
      <div ng-switch-when="Parent">{{item[0]}}</div> 
      <div ng-switch-default>&emsp;{{item[0]}}</div> 
     </div>  
    </li> 
</ul> 
<br/> 
<h1>-- Dropdown Box --</h1> 
<select ng-model="loc1" ng-options="item[0] for item in itemlist"> 
    <option value="">Item</option> 
</select> 
<br/><br/> 
<h1>-- What I Got --</h1> 
<select ng-model="loc2"> 
    <option ng-repeat="item in itemlist"> 
     <div ng-switch on="item[1]"> 
      <div ng-switch-when="Parent">{{item[0]}}</div> 
      <div ng-switch-default>&emsp;{{item[0]}}</div> 
     </div>  
    </option> 
</select>

的JavaScript：

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
$scope.itemlist = 
    [ 
    ["Unit A", "Parent"], 
    ["Room A", "Child"], 
    ["Room B", "Child"], 
    ["Room C", "Child"], 
    ["Room D", "Child"], 
    ["Room E", "Child"], 
    ["Unit 1", "Parent"], 
    ["Room 1", "Child"], 
    ["Room 2", "Child"], 
    ["Room 3", "Child"] 
    ]; 
}

JsFiddle here：http://jsfiddle.net/HB7LU/11174/

來源

2015-02-23 Raii

div的內部選項無效的HTML – 2015-02-23 07:41:02

我不認爲你可以在選項元素內使用，因爲它沒有呈現爲html。如果你堅持使用元素而不是像jQuery下拉菜單（基本上是a），那麼我建議使用破折號或類似的方式來說明父母/孩子的關係。

http://jsfiddle.net/HB7LU/11177/

我解決它使用格式化函數我放在範圍

$scope.formattedItem = function(item) { 
    return item[1] === 'Parent' ? item[0] : '--' + item[0]; 


<select ng-model="loc2"> 
    <option ng-repeat="item in itemlist" > 
     {{formattedItem(item)}} 
    </option> 
</select>

來源

2015-02-23 07:36:35 jonas

我看到:(謝謝！ – Raii 2015-02-24 05:34:11

選擇選項內的角度切換

回答

相關問題