javascript - 按类名计算元素未按预期工作

Question

我正在尝试对具有特定类名的元素进行计数，这些元素作为切换控件的一部分添加和删除。这意味着报告的计数不正确。

我注意到我当前的实现会跳过第一个选定的元素(即不计数)，并且只开始计算第二个元素。

我的代码如下:

查看

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

Controller

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/

更新:抱歉出现，jsfiddle 中的代码不起作用。

Answer 1

只需去掉 === true 和 === false 即可。

而是这样做:

ng-class="{ 
    'button-custom-padding': bookingSelected, 
    'button-positive': !bookingSelected,
    'booking-selected' : bookingSelected, 
    'button-balanced': bookingSelected
}"