Question

今天我在AngularJS面临一个奇怪的问题。

在这个例子中，我在产品中有两个ng-repeat（两个或三个图像和相同数量的颜色）和一个ng-repeat用于分页（在这种情况下我假设不相关）。

HTML：

<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
  <div class="item">
   <!-- Item image -->
     <div class="item-image">
      <ul>
       <li ng-repeat="desc in item._source.description" ng-show="$first">
        <img class="preview" ng-src="server/{{desc.smallImage.url}}">
       </li>
      </ul>
     </div>
     <!-- Item details -->
    <div class="item-details">
     <div class="product-colors">
      <ul class="btn-group pull-right">
       <li ng-repeat="color in item._source.description">
       <img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
      </li>
     </ul>
    </div>
  </div>
</div>

我想做的就是点击其中一种颜色（img.color）改变相应的img.preview可见性。在我的尝试中，我总是能够改变整个列表中的每个img.preview，而不是我点击的那个。

我的尝试：

HTML

<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">

JS（控制器）

$scope.changeColor = function(idx) {                
 $scope.selectedColor = idx || 0; //default show always first img.preview from list
};

MY ATTEMPTS＃2（工作）

HTML

<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">

JS（控制器）

$scope.changeColor = function(idx, key) {
  $scope.__selected = key;
  $scope.__num = idx;
};

Answer 1

这可能很简单：

考虑desc和color将引用相同的对象，因为它们属于同一个来源。因此，desc和color应该是相同的，并且在其中任何一个上设置属性都应该反映在另一个上。

进行如下更改并尝试，但未经过测试：

<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">

和

<li ng-repeat="color in item._source.description">
    <img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>

两次ng重复，一次影响另一次

1 个答案: