javascript - 使用 Angular 有条件地显示选择中的选项

Question

我正在创建一个模板，用于在我的应用程序中显示选择字段。不过我有 4 种不同类型的选择字段。 value = id，value = name，value = static_id 和 value = static_name(这很复杂......)。

如果可能的话，我计划将来将它们迁移到 ngOptions，但现在我正在尝试拥有一个单一的选择模板，它将处理所有 4 种类型的字段。

我目前使用 ng-if 来显示选择的不同“静态”代码，但这会创建大量代码，我想将这些代码减少到这个单一模板中。

这是一些代码:

// 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-if ，它将从它读取的 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>

在选择中使用跨度可能是可怕的代码，但这就是为什么我来找你们这些好人。目前，它显示了正确的选项，但是，它显示了列出的选项两次，我假设一旦包含所有选项类型，它就会列出它们 4 次。我希望这是有道理的。提前致谢。

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 非常快速的回复。