angular ng-repeat内部的动态属性引用

dynamic attribute reference inside angular ng-repeat

本文关键字：属性 引用 动态 ng-repeat 内部 angular      更新时间：2023-09-26

我建立了一个下拉指令，它与不同的对象类型工作，每个对象都有自己的特定属性，我需要在我的下拉菜单的ng-repat内获得一些特定的字段，现在，它是固定的cityName，我如何改变cityName变量，留在控制器上?

  <div class="listCombo" ng-show="showDrop" ng-mouseleave="lostFocus()">
        <table>
            <tr ng-repeat="result in results" ng-click="selectItem(result)">
                <td> {{result.cityName}} </td>
            </tr>
        </table>
    </div>

例如，我需要得到peopleName而不是cityName。

是的，可以在ng-repeat中动态更改property属性。下面是如何实现这一目标的示例代码。

1)你应该有像下面这样的数据源，使事情变得容易

$scope.objectsList = [{
                'name': 'Vikram',
                'Age': '25',
                'sex': 'M'
            }, {
                'name': 'Quantum',
                'Age': '26',
                'sex': 'F'
            }, {
                'name': 'Katty',
                'Age': '22',
                'sex': 'F'
            }];
            $scope.objName = 'name';

2)在你的HTML中，在你的ng-repeat

中有这样的东西
<p ng-repeat="obj in objectsList">
    {{obj[objName]}} <!-- here by changing the 'objName' we can decide which property value to be displayed dynamically-->
</p>
<input type="text" ng-model="objName"/><!-- This is for example..u dont need this-->

如果你看看JS，我们已经提到了$scope.objName = 'name';，即它将在列表中显示所有的名字，如果我们将$scope.objName更改为'Age'，那么它将在数据源中显示相应的年龄。

希望这是回答你的问题

如果您想在td中有条件地显示cityName或peopleName，

可以这样使用

它不是有条件地构建DOM，但你可以看到这样。也许这对你来说不是一个好方法，但我希望它能帮助你。

 <div class="listCombo" ng-show="showDrop" ng-mouseleave="lostFocus()">
        <table>
            <tr ng-repeat="result in results" ng-click="selectItem(result)">
                <td ng-show="someCondition(result) === true"> {{result.cityName}} </td>
                <td ng-show="someCondition(result) === false"> {{result.cityName}} </td>
            </tr>
        </table>
    </div>
相关文章：