Question

使用AngularJS ngRepeat时遇到以下问题。这个问题可以在这个jsFiddle中看到。

用户可以选择角色，然后获得所有组合在字母表中选择的字符。例如：

A - A-B，A-C，A-D等

B - B-A，B-C，B-D等

Everithing工作正常，但当用户更改所选值时字符组合未更新。我解决了这个问题添加以下代码。

<span style="display: none;">
        {{item.combionations = getCombinations(item)}}
</span>

并“破解”它。但必须有正常的解决方案。我会非常感谢任何想法和建议。

祝你好运。

Answer 1

<强>更新

如果您打算根据选择进行更复杂的计算，这种简化方法将无效。通常，将状态封装在某些数据结构中也更好。在你的情况下，你可以设计一个这样的结构：

{letter：“A”，组合：[“A-B”，“A-C”，...]}

要更新组合数组，您可以使用ng-change="updateItem(item)"和一些更新功能。每当您更改选择时，数组combination都会更新：

$scope.updateItem = function(item) {
  item.combinations = getCombinations(item.letter);
}

我把它放在new fiddle。

您可以使用ng-select中绑定到ng-repeat的模型轻松解决此问题。

在您使用的选择中item.model。只要您更改选择，Angular就会在范围内更新其值。

<select data-ng-model="item.model" ng-init="item.model=allLetters[0]" ng-options="value for value in allLetters">
</select>

当您在ng-repeat中使用相同的范围变量时，您应该获得所需的行为。

<div ng-repeat="letter in allLetters">
  {{item.model}}-{{letter}}
</div>

看看updated fiddle。

Answer 2

问题是你在begenning（combionations）计算ng-init="item.combionations=getCombinations(item)"一次。之后，当您更改item.model时，它永远不会更新。

您可以解决此问题（并确保created[...].combionations保持最新），如下所示：

<div data-ng-repeat="item in created">
    <div ng-repeat="combination in item.combionations = getCombinations(item)">
        {{combination}}
    </div>
    ...

另请参阅此 short demo 。

使用ng重复的歧义

2 个答案: