有条件地显示选项中的选项与角

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"]}, 
];