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

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

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

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

阅读 6.8k
4 个回答

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

<style type="text/css">
      .selected{
        background-color: lightgreen;
      }
    </style>
  <div ng-repeat="item in items" ng-class='{selected:$index==selectedRow}' ng-click='selectedWhich($index)'>
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
    </div>
   <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>

你好,请问这个问题着么解决的,采纳的链接打不开

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题