在 ng-repeat 期间选择时如何使 md-list-item 处于活动状态？

Question

这是我的场景

当我 select 列表 (<md-list-item>) 中的任何一项时，应为特定项目附加活动 class。

当我尝试这样做时，活动 class 会附加到所有项目。如果有人知道解决方案，请帮助我。我是 material 设计新手。

<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId(review.empId)">
                <img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
                <div class="md-list-item-text" layout="column">
                    <h3>
                        {{review.name }}
                    </h3>
                    <span class="review-subtext">{{review.info}}</span >
                    <p class="review-status">{{review.status}}</p>
                </div>
                <md-divider></md-divider>
</md-list-item>

Answer 1

您可以向 oReviews 对象添加布尔类型属性吗？您可以在他们单击时更新属性然后您可以使用 ngClass 添加活动 class

Answer 2

这是一种方法 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-list>
    <md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId($index)" ng-class="{selectedIndex: selectedIndex===$index}">
      <img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
      <div class="md-list-item-text" layout="column">
        <h3>
          {{review.name }}
        </h3>
        <span class="review-subtext">{{review.info}}</span >
        <p class="review-status">{{review.status}}</p>
      </div>
      <md-divider></md-divider>
    </md-list-item>
  </md-list>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope) {
  $scope.selectedIndex = null;
  $scope.oReviews = [
    {name: "Cheese", info: "Dairy", status: "Delicious"},
    {name: "Beef", info: "Cow", status: "Versatile"},
    {name: "Bread", info: "Yeast", status: "Everywhere"},
  ];

  $scope.fnReviewEmployeeId = function (index) {
    if ($scope.selectedIndex === null) {
      $scope.selectedIndex = index;
    }
    else if ($scope.selectedIndex === index) {
      $scope.selectedIndex = null;
    }
    else {
      $scope.selectedIndex = index;
    }
  }
});

CSS

.selectedIndex {
  background: yellow;
}

Answer 3

我认为 Material 设计以不同方式处理选择，在文档中的列表下，示例显示使用复选框指示基于 ng-model 的选择：

//I added the ng-click
<md-list-item ng-repeat="topping in toppings"  
        ng-click="topping.wanted = !topping.wanted">
    <p> {{ topping.name }} </p>
    <md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
</md-list-item>

查找分区列表控件：https://material.angularjs.org/latest/demo/list

在 ng-repeat 期间选择时如何使 md-list-item 处于活动状态？

How to make md-list-item active when selected during ng-repeat?

javascript

angularjs

angular-material