CODEWITHSUNDEEP
user-interfaceangularjscounter
Joe
Joe

Reputation: 127

Angular count not updating

I have an Angular controller method which counts the number of people waiting to be seated (say at a restaurant). The models contains a property set to either true or false. The method should iterate over the models, checking the 'seated' property and count all those that are true.

See a simple example at: http://jsfiddle.net/JoeDredd/nB4tP/

function seatingCtr($scope) {
$scope.bookings = [{
    name: 'fred',
    seated: true
}, {
    name: 'george',
    seated: false
}, {
    name: 'barney',
    seated: false
}];

$scope.toSeat = function () {
    var count = 0;
    angular.forEach($scope.bookings, function (booking) {
        count += booking.seated ? 0 : 1;
    });
    return count;
};

}

The method works on page load, and changing the seated drop menu correctly reflects the property (number of seated people), however when you change the drop down to again, the updated counter does not reflect the correct number. I've unable to work out why the counter does not change correctly, as the logic all seems sound.

Can anyone point me in the right direction?

Thx in advance.

Upvotes: 2

Views: 489

Answers (1)

Bertrand
Bertrand

Reputation: 13570

The problem is that when you change booking from 'Seated' to 'Not seated' the booking.seated model has its value changed to a string "false" instead of boolean false. Any string that is not empty will evaluate to true, this is what is happening inside toSeat().

Boolean("false");  // == true

Here is your fiddle with true and false replaced by string "true" and "false" and the conditional is now checking if booking.seated === "true"

Upvotes: 3

Related Questions