Here is my scenario

When i select any one item in list(<md-list-item>) an active class should be appended for the particular item.

When iam trying to do it, active class getting appended for all the items. Please help me if anyone knows the solution. Iam new to material design.

<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId(review.empId)">
                <img ng-src=".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>

Here is my scenario

When i select any one item in list(<md-list-item>) an active class should be appended for the particular item.

When iam trying to do it, active class getting appended for all the items. Please help me if anyone knows the solution. Iam new to material design.

<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId(review.empId)">
                <img ng-src="https://x1.xingassets./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>

• javascript
• angularjs
• angular-material

Share Improve this question Follow asked Aug 18, 2016 at 19:33 Ravi Teja Kumar IsettyRavi Teja Kumar Isetty 1,59944 gold badges2121 silver badges3939 bronze badges 3

• how/where you adding active class ? is it inside fnReviewEmployeeId function? – Ja9ad335h Commented Aug 18, 2016 at 19:40
• Yes it is inside that function @JAG – Ravi Teja Kumar Isetty Commented Aug 18, 2016 at 19:46
• so that code part may be wrong.. post it in your question – Ja9ad335h Commented Aug 18, 2016 at 19:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here's one way of doing it - CodePen

Markup

<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./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;
}

Can you add a boolean type property to the oReviews object? You could update that property when they click on it and then you can use ngClass to add the active class

I think Material Design handles selection differently, under List in the Docs, the example shows using a checkbox to indicate selection based on 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>

Look for Section List Controls: https://material.angularjs/latest/demo/list