2016-05-13 2 views
0

Я пытаюсь подсчитать элементы с определенным именем класса, которые добавляются и удаляются как часть элемента управления переключением. Это означает, что подсчитанный счет неверен.Элемент подсчета по имени класса не работает как ожидалось

Я заметил, что моя текущая реализация пропускает первый выбранный элемент (т. Е. Не учитывается) и только начинает отсчитывать второй.

Мой код выглядит следующим образом:

Посмотреть

<div ng-controller="MyCtrl"> 
    <div class="item item-button-right" ng-repeat="i in [1, 2, 3, 4]"> 

    Full Colour 
    <p>&pound;50 and up to 1 hour</p> 

    <button class="button button-custom" ng:click="bookingSelected = !bookingSelected; 
           $parent.$parent.activeProfileHeader = false; 
           $parent.$parent.displayBookingFooter(true);" ng-class="{ 'button-custom-padding': bookingSelected === true, 
           'button-positive': bookingSelected === false, 
           'booking-selected' : bookingSelected === true, 
           'button-balanced': bookingSelected === true}">{{bookingSelected && '✔' || 'Book'}}</button> 
    </div> 

<br> 

    Total: {{numItems('booking-selected')}} 

</div> 

Контроллер

var myApp = angular.module('myApp', []); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope, $window) { 
    $scope.bookingSelected = false; 

    $scope.numItems = function(className) { 
    return $window.document.getElementsByClassName(className).length; 
    }; 
} 

Fiddle: http://jsfiddle.net/ha5oac6v/

UPDATE: Извините, код в jsfiddle не работает.

+1

Ваш код оленья кожа»работа причина опечатка нг щелчку. Проверьте, что вы написали ng: click. Кроме того, эта вещь подсчета классов не кажется хорошей идеей. Почему бы вам не отодвинуть выбранные элементы в массив и не подсчитать длину массива? – yBrodsky

+0

http://jsfiddle.net/rvukp5Lh/ в основном это работает, downvoted. –

+0

Как я могу выделить выбранные элементы в массив? – methuselah

ответ

1

Просто избавитесь от === true и === false.

Вместо делать:

ng-class="{ 
    'button-custom-padding': bookingSelected, 
    'button-positive': !bookingSelected, 
    'booking-selected' : bookingSelected, 
    'button-balanced': bookingSelected 
}" 
Смежные вопросы