Angular select 选项内的 ng-switch

Question

我想要将[数据展示格式]应用于[下拉框]。我需要将 "parent" 按原样显示在下拉框中，但我需要 "child" 与 [制表符] 一起显示，以显示父子关系。

$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 在这里：http://jsfiddle.net/HB7LU/11174/

Answer 1

我认为您不能在选项元素内使用，因为它不会呈现为 html。如果您坚持使用该元素而不是 jQuery 下拉列表（基本上是一个）之类的东西，那么我建议使用破折号或类似的东西来说明 parent/child 关系。

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>

Angular select 选项内的 ng-switch

Angular ng-switch inside select option

javascript

angularjs

ng-switch