角度ng-repeat内的动态属性引用

时间:2016-09-28 01:28:09

标签: javascript angularjs

我构建了一个下拉指令,它使用不同的对象类型,每个对象都有自己的特定属性,我需要在我的下拉列表的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

2 个答案:

答案 0 :(得分:2)

是的,可以在ng-repeat中动态更改属性属性。以下是有关如何实现此目的的示例代码示例。

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更改为&#39;年龄&#39;它将显示列表中的所有名称。然后它将在数据源中显示相应的年龄。

希望这可以回答你的问题。

答案 1 :(得分:0)

如果要在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>