Как сделать md-list-item активным при выборе во время ng-repeat?

0

Вот мой сценарий

Когда я выбираю какой-либо один элемент в списке (<md-list-item>), для конкретного элемента должен быть добавлен активный класс.

Когда iam пытается это сделать, активный класс добавляется для всех элементов. Пожалуйста, помогите мне, если кто-нибудь знает решение. Я новичок в материальном дизайне.

<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>
  • 0
    как / где вы добавляете active class ? это внутри функции fnReviewEmployeeId ?
  • 0
    Да, именно внутри этой функции @JAG
Показать ещё 1 комментарий
Теги:
angular-material

3 ответа

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;
}
Поделиться
  • 0
    Это было бы хорошим способом сделать это также. Я упустил, что он выбирал только один предмет, а не несколько. Мой метод будет работать лучше для нескольких элементов, выбранных одновременно
  • 0
    Спасибо @camden_kid, я что-то пропустил, если условия в моем коде. Это хорошо для меня. В моем требовании я хочу, чтобы только один элемент был выбран при клике
Показать ещё 2 комментария
1

Я думаю, что Material Design обрабатывает выбор по-разному, в разделе "Список в документах" в примере показано использование флажка для указания выбора на основе ng-модели:

//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

Поделиться
  • 0
    По сути, это список с множественным выбором, который не выделяет сам элемент списка в результате нажатия на него. ОП ищет способ обозначить «активный» элемент в списке, что является отдельной задачей. К сожалению, в директиве md-list отсутствует удобное средство для этого.
  • 0
    Материал Дизайн, кажется, способствует активному выбору строк с помощью флажков. A-MD обеспечивает эту группировку директив, чтобы разрешить выбор одной или нескольких строк. Выделение цвета фона строки может противоречить духу руководства по стилю: material.io/guidelines/components/lists-controls.html , что отражено в моем ответе. Я думаю, что это работает хорошо и чисто, учитывая стили Материального Дизайна.
Показать ещё 2 комментария
1

Можете ли вы добавить свойство типа boolean в объект oReviews? Вы можете обновить это свойство, когда нажмете на него, а затем вы можете использовать ngClass для добавления активного класса

Поделиться
  • 0
    Спасибо @Dave, я проверю это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню