为 HTML 和 AngularJS 中的选定选项标签实现带有 ng-repeat 的 ng-if

Question

我有一个下拉菜单，使用 select 和带 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>

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

Answer 1

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

假设您有另一个设置 packageSearch 的 select，您可以这样做：

<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)

Answer 2

尝试使用 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>

为 HTML 和 AngularJS 中的选定选项标签实现带有 ng-repeat 的 ng-if

Implementing ng-if with ng-repeat for selected option tag in HTML and AngularJS

html

javascript

angularjs

ng-repeat

angular-ng-if