有條件地顯示選項中的選項與角

Question

我正在創建一個模板來顯示我的應用程序中的選擇字段。不過，我有4種不同類型的選擇字段。值= id，value = name，value = static_id和value = static_name（這很複雜......）。

我打算將這些遷移到ngOptions，如果將來可能的話，但現在我試圖有一個選擇模板，它將處理所有4種類型的字段。

我目前使用ng-if來顯示select的不同'靜態'代碼，但是這會創建很多代碼，我想減少到這個單個模板中。

下面是一些代碼：

// shows a basic select field where option value = id 
<div ng-if="field.type=='select'" class="form-group"> 
    <select-field></select-field> 
</div> 

// shows a basic select field where option value = name 
<div ng-if="field.type=='select_name'" class="form-group"> 
    <select-field></select-field> 
</div> 

// shows a basic select field where option value = static_id 
<div ng-if="field.type=='select_static_id'" class="form-group"> 
    <select-field></select-field> 
</div> 

// shows a basic select field where option value = static_name 
<div ng-if="field.type=='select_static_name'" class="form-group"> 
    <select-field></select-field> 
</div> 

在這裏，所有的字段屬性是相同的，除了產生的選項。因此我爲什麼要模板化這個。

我試圖讓這個單一的模板有另一個ng - 如果裏面會檢測字段類型，從它讀取的JSON，然後相應地更改顯示的選項，就像這樣（顯示的4個示例中的2個）：

<select 
    name={{field.name}} 
    class="form-control form-field {{relationshipUrl}}" 
    id={{field.name}} 
    data-is-autofocus={{field.focus}} 
    data-selectreq={{field.rules.selectreq}} 
    data-showhide={{field.rules.showhide}} 
> 
    <option value="" selected>Please select...</option> 
    <span ng-if="field.type=='select'">  
     <option 
      value={{option.id}} 
      ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'" 
      ng-selected="formData[field.name] == option.id"> 
       {{option.name || option.firstName}} 
     </option> 
    </span> 
    <span ng-if="field.type=='select_static_name'"> 
     <option 
      value={{option.name}} 
      ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'" 
      ng-selected="formData[field.name] == option.name"> 
       {{option.name}} 
     </option> 
    </span> 
</select> 

可能可怕的代碼以使用範圍內的選擇，但是這就是爲什麼我來給你很好的人。目前這種方法的作用在於它顯示了正確的選項，但是它顯示了兩次列出的選項，並且我認爲一旦包含所有選項類型，它將列出它們四次。我希望這是有道理的。提前致謝。

Answer 1

好吧，我剛發佈，答案是非常明顯。取代上述方法，通過刪除跨度並將ng-if置於<option>而不是解決問題，它完美地工作！

<select 
    name={{field.name}} 
    class="form-control form-field {{relationshipUrl}}" 
    id={{field.name}} 
    data-is-autofocus={{field.focus}} 
    data-selectreq={{field.rules.selectreq}} 
    data-showhide={{field.rules.showhide}} 
> 
    <option value="" selected>Please select...</option> 
    <option ng-if="field.type=='select'" 
     value={{option.id}} 
     ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'" 
     ng-selected="formData[field.name] == option.id"> 
      {{option.name || option.firstName}} 
    </option> 
    <option ng-if="field.type=='select_name'" 
     value={{option.name}} 
     ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'" 
     ng-selected="formData[field.name] == option.name" > 
      {{option.name}} 
    </option> 
    <option ng-if="field.type=='select_static_id'" 
     value={{option.id}} 
     ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'" 
     ng-selected="formData[field.name] == option.id" > 
      {{option.name}} 
    </option> 
    <option ng-if="field.type=='select_static_name'" 
     value={{option.name}} 
     ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'" 
     ng-selected="formData[field.name] == option.name"> 
      {{option.name}} 
    </option> 
</select> 

無論如何謝謝@charlietfl非常快速的迴應。

Answer 2

我有點遲了答案，但我設法做一個工作JSFIDDLE我希望你試圖完成。

我將您的代碼因式分解爲單個選擇並添加了另一個選擇，以向您展示如何僅顯示一個或全部顯示。

<div> 
     <select ng-model="selector"> 
     <option value=""></option> 
     <option value="">Show everything</option> 
      <option ng-repeat="option in Options" value="{{option.type}}">{{option.type}}</option> 
     </select> 
    </div> 
    <div ng-repeat="option in Options" ng-show="$parent.selector == option.type || $parent.selector == ''"> 
    {{option.type}} 
    <select> 
     <option ng-repeat="choice in option.choices" value="{{choice}}">{{choice}}</option> 
    </select> 
    </div> 

而且數據：

$scope.Options = [ 
{type:"id", choices:["0", "1", "2"]}, 
{type:"name", choices:["John", "Doe", "Smith"]}, 
{type:"static_id", choices:["3", "4", "5"]}, 
{type:"static_name", choices:["Static 1", "Static 2", "Static 3"]}, 
];