使用 ng-repeat 为 HTML 和 AngularJS 中的选定选项标签实现 ng-if答案

【问题标题】：Implementing ng-if with ng-repeat for selected option tag in HTML and AngularJS使用 ng-repeat 为 HTML 和 AngularJS 中的选定选项标签实现 ng-if
【发布时间】：2023-03-30 02:55:01
【问题描述】：

我有一个下拉菜单，使用 AngularJS 的选择和选项标签，引用模型，像这样。

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc" value="{{ x.locationId }}">{{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})</option>
</select>

此下拉列表列出了大约七个用户可以选择的位置 ID。

但是，我有另一个模型可以从另一个条目中调出特定的位置 ID；这个位置 ID 肯定是上面下拉列表中显示的位置 ID 之一。打电话给packageSearch.locationId。这只会是一个数字。

如果此位置 ID 与上面下拉列表中的位置 ID 之一匹配，我希望显示 selected 关键字，使上面的下拉列表显示来自我的第二个模型的位置 ID。

我尝试使用 ng-if 来实现这一点。但我不成功。见下文：

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc" value="{{ x.locationId }}" ng-if="{{ x.locationId === packageSearch.locationId" selected>{{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})</option>
</select>

如果<option> 元素的值与另一个模型的数据匹配，我如何能够将selected 关键字应用于AngularJS 元素之一？

【问题讨论】：

标签： javascript html angularjs ng-repeat angular-ng-if

【解决方案1】：

尝试使用ng-selected:

<select id="edit-location" class="" ng-model="packageLoc">
    <option ng-repeat="x in loc"
        value="{{ x.locationId }}"
        ng-selected="x.locationId === packageSearch.locationId">
            {{ x.locationLoc }} - ({{ x.locationFloor }}{{ x.locationBuilding }})
    </option>
</select>

【讨论】：

正是我需要的。

【解决方案2】：

我建议您在满足此条件时将模型 (packageLoc) 设置为正确的值，而不是添加选定的属性。

假设您有另一个选择设置 packageSearch，您可以执行以下操作：

<select id="search-location" ng-model="packageSearch" ng-change="setLocation()">
    <option ng-repeat="..."></option>
</select>

在控制器的 setLocation 函数中，您可以编写如下内容：

packageLoc = packageSearch; (or whatever you'd like to do here)

【讨论】：

当然。可以举个例子吗？