javascript - ng-class实现选中元素变色，同时复原已变色的元素

Question

我做了一个联系人列表如下

<p class="contact_user" ng-show="visible1" ng-class = "{'selected':isSelected}" ng-click="isSelected = true" ng-repeat="contacter in contacters | filter:name">
    <p class="user_avator">
        <img src="{{contacter.img_url}}"/>
    </p>
    <h3 class="user_name">
        {{contacter.name}}
    </h3>    
</p>

但这样我每次选一个联系人都会变色，我想复原已经变色的联系人，也就是说选哪个就只有哪个变色，我该怎么做？

Answer 1

http://plnkr.co/edit/fqsLoxKJtx3NpYxxbCDv

Answer 2

ngRepeat 出来的列表内部都有个 $index，不要为每一个列表项设置 isSelected，而是要针对整个列表跟踪当前被选中的 $index 是哪个，然后用表达式绑定那个 class，判断 $index 是不是 currentSelected 就可以了。

Answer 3

<style type="text/css">
      .selected{
        background-color: lightgreen;
      }
    </style>
  <p ng-repeat="item in items" ng-class='{selected:$index==selectedRow}' ng-click='selectedWhich($index)'>
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
    </p>
   <script>
    $scope.items = [
          { product_name: "Product 1", price: 50 },
          { product_name: "Product 2", price: 20 },
          { product_name: "Product 3", price: 180 }
        ];
        $scope.selectedWhich = function (row) {
          $scope.selectedRow = row;
        }
</script>