Использование ng-класса в 'md-list-item' click in angularjs

Question

Im new to angularjs. У меня шесть md-list-item на моей странице html. Я хочу добиться того, что когда я нажимаю каждый из md-list-item, он добавит class. Я просто хочу добавить ссылку active, когда я нажимаю каждую ссылку. Вот моя идея:

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}"> 
    <p>Link 1</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}"> 
    <p>Link 2</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': ifThisOneIsClicked()}"> 
    <p>Link 3</p> 
</md-list-item> 

Возможно ли это? Если да, то как я могу это сделать? Благодаря!

Answer 1

Вы можете обработать его с помощью переменной области видимости selected. он будет сохранять выбранный элемент. И с директивой ng-click измените это значение в соответствии с элементом.

<md-list-item ng-class="{'setAsActive': selected=='1'}" ng-click="selected='1'"> 
    <p>Link 1</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': selected=='2'}" ng-click="selected='2'"> 
    <p>Link 2</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': selected=='3'}" ng-click="selected='3'"> 
    <p>Link 3</p> 
</md-list-item> 

Другой вариант: Если вы хотите сохранить список выбранных предметов.

<md-list-item ng-class="{'setAsActive': isSelected('1')}" ng-click="selectItem('1')"> 
    <p>Link 1</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': isSelected('2')}" ng-click="selectItem('2')"> 
    <p>Link 2</p> 
</md-list-item> 

<md-list-item ng-class="{'setAsActive': isSelected('3')}" ng-click="selectItem('3')"> 
    <p>Link 3</p> 
</md-list-item> 

В контроллере:

Держите массив выбранных элементов.

$scope.selectedItems = []; 
$scope.isSelected= function(index){ 
    return $scope.selectedItems.indexOf(index)!=-1; 
} 

$scope.selectItem = function(index){ 
    //TODO: check if it was already added 
    $scope.selectedItems.push(index) 
} 

Answer 2

Я думаю, что лучшая идея - сделать что-то, что может быть легко многоразовым, как директива.

ЯШ:

angular.module('tAngularApp').directive('ngActive', function() { 
    return { 
     restrict: 'A', 
     link: function($scope, element, attrs, ngModelCtrl) { 
      element.bind('click', function() { 
       element.addClass('setAsActive'); 
      }); 
     } 
    }; 
}); 

Вы можете использовать его легко только вводя ng-active директиву, где когда-либо вы хотите это поведение, как:

HTML:

<md-list-item ng-active> 
    <p>Link 1</p> 
</md-list-item> 

<md-list-item ng-active> 
    <p>Link 2</p> 
</md-list-item> 

<md-list-item ng-active> 
    <p>Link 3</p> 
</md-list-item> 

Answer 3

Я просто хочу, чтобы расширить Ответ Мануэля. Если вы хотите, чтобы справиться с «нажмите переключатель» (класс будет добавлен в первый раз при нажатии и удаляется во второй раз), вы можете сделать это с помощью объекта и булевы:

$scope.selectedItems = {} 
$scope.isSelected = function (index) { 
    return $scope.selectedItems[index] === true 
} 

$scope.selectItem = function (index) { 
    $scope.selectedItems[index] = !$scope.selectedItems[index] 
} 

(HTML, Безразлично» изменение т)

Кроме того, как вы новичок Угловое, это хорошее время, чтобы узнать некоторые советы:

https://github.com/mgechev/angularjs-style-guide

https://www.youtube.com/watch?v=ZhfUv0spHCY