Question

这是我的方案

当我选择列表中的任何一个项目（<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>）时，应为特定项目追加活动类。

当我尝试这样做时，活动类会为所有项目追加。如果有人知道解决方案，请帮助我。我刚接触材料设计。

cob() {
   name=name/$(date +%m/%d)/${1// /-}
   git checkout -b "$name"
}

Answer 1

这是一种做法 - 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 2

你能为oReviews对象添加一个布尔类型属性吗？您可以在单击它时更新该属性，然后可以使用ngClass添加活动类

Answer 3

我认为Material Design处理选择的方式不同，在文档中的List下，示例显示使用复选框表示基于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激活？

3 个答案: