Question

这应该是一个非常简单的问题。是否可以像这样动态获取属性值：

<div tabset>
    <div tab ng-repeat="item in teamController.range track by $index">
        <div tab-heading>
            <div class="selected-colour" ng-class="{ 'no-colour-selected': !controller.kit['colour' + $index + 1] }" ng-style="{ 'background-color' : '#' + controller.kit['colour' + $index + 1] }"></div> {{ controller.kit['colour' + $index + 1] }}
        </div>

        <div class="picker colour-picker">
            <ul class="picker-dropdown list-inline">
                <li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + $index + 1] === colour.hex }">
                    <a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour(controller.kit['colour' + $index + 1], colour)"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

希望你能看到我的模型有3个属性：

Colour1

颜色2

Colour3

在我的重复中，我试图通过做

来获得每个人

controller.kit['colour' + $index + 1]

更新

所以我改变了我的看法：

<div tabset>
    <div tab ng-repeat="item in teamController.range track by $index">
        <div tab-heading>
            <div class="selected-colour" ng-class="{ 'no-colour-selected': !controller.kit['colour' + ($index + 1)] }" ng-style="{ 'background-color' : '#' + controller.kit['colour' + ($index + 1)] }"></div> {{ controller.kit['colour' + ($index + 1)] }}
        </div>

        <div class="picker colour-picker">
            <ul class="picker-dropdown list-inline">
                <li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + ($index + 1)] === colour.hex }">
                    <a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour(controller.kit['colour' + ($parent.$index + 1)], colour)"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

在我的控制器中我有这个：

// Set our colours
self.setColour = function (item, colour) {

    // Set the colour
    item = colour.hex;

    console.log(item);
    console.log(kit);

    // Store our model in the session
    configuratorService.saveToSession(kit);
};

它不会更新套件。但是如果我将setColour调用更改为

teamController.setColour(controller.kit['colour' + ($parent.$index + 1)], colour)

然后将我的控制器功能更改为：

// Set our colours
self.setColour = function (item, colour) {

    // Set the colour
    item.colour1 = colour.hex;

    console.log(item);
    console.log(kit);

    // Store our model in the session
    configuratorService.saveToSession(kit);
};

一切正常。我也尝试使用 teamController.setColour（controller.kit [＆＃39; color＆＃39; +（$ index + 1）]，color），但这并没有奏效。有谁知道为什么？

Answer 1

在连接字符串之前，需要先将$index + 1括在圆括号内进行评估。

此外，如果您想访问父$index的{{1}}

，则需要使用$ parent表示法

ng-repeat

Answer 2

这是一个很难解决的问题。我不得不改变我的功能工作方式。我改变了我的功能：

// Set our colours
self.setColour = function (propertyName, colour) {

    // Set the colour
    kit[propertyName] = colour.hex;

    // Store our model in the session
    configuratorService.saveToSession(kit);
};

和我的HTML：

<div class="picker colour-picker">
    <ul class="picker-dropdown list-inline">
        <li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + ($index + 1)] === colour.hex }">
            <a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour('colour' + ($parent.$index + 1), colour)"></a>
        </li>
    </ul>
</div>

出于某种原因，我发现如果我尝试传递实际属性，虽然它更新了属性但它并没有更新所有引用（就好像视图中的动态属性总是被视为副本）。这样做可以解决这个问题。

AngularJS动态获取属性

更新

2 个答案: