有条件地在带有角度的选择中显示选项

Conditionally showing options in a select with Angular

本文关键字：选择 显示 选项 有条件      更新时间：2023-09-26

我正在创建一个模板，用于在我的应用程序中显示选择字段。但是，我有 4 种不同类型的选择字段。值 = id，值 = 名称，值 = static_id 值 = 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 次。我希望这是有道理的。提前谢谢。

好吧，我刚发帖，答案就显而易见了。而不是通过删除跨度并将 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谢谢你，回复非常快。

我回答有点晚了，但我设法制作了一个我希望你尝试完成的工作 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"]},
];
相关文章：