How do I assign a unique controller to $last in AngularJS?

Question

First, I'm new to AngularJS, so please bear with me. I have been reading the documentation and working through some online tutorials to try to get at least the basics down, but this particular matter has me stumped. I'm not even sure what I want to do is possible. I have been at it for two days and tried a variety of solutions including isolating the last <li> by its name property, using a classic for loop to iterate the others, using angular forEach to loop the others, etc. I'm hoping someone here can help me.

What I have is an ng-repeat generated list of items ("candle in candles") with a simple toggle to select/unselect each item and a "total" controller to total up the items selected. What I want to do is isolate the last <li> item using $last and bind a unique "clear all previous" toggle to that $last item. When selected (or 'active') the controller for the last item alone should look through the previous items and unselect any that are selected (thus removing them from the total as well). In other words, the last item should act as a "clear all previous selections" click as well as a self-toggle.

The class "last" is rendering as it should, but I am having difficulty isolating it and binding it to its own function. Meanwhile since the general toggle continues to work, I get "silent fails" that don't offer any console clues to what I'm doing wrong.

Here's my code so far: http://jsfiddle.net/codesushi156/tKZjZ/215/ I've commented to indicate the portion that is failing:

    function OrderFormController($scope){

    $scope.candles = [
        {
            name: 'Aromatherapy Collection',
            items: 'Amber Sandalwood, Goddess, Lavender, Love, Patchouli Pear',
            price: 45,
            active:true
        },{
            name: 'Fruit Collection',
            items: 'Dreamy Orange, Bliss, Love Spell',
            price: 27.5,
            active:false
        },{
            name: 'Holiday Collection',
            items: 'Candy Cane, Chocolate Mint Truffle, Chocolate Vanilla, Cranapple Spice, Christmas Tree, Home for the Holidays, Pumpkin Spice',
            price: 63.5,
            active:false
        },{
            name: 'Wine Collection',
            items: 'Cabernet, Chardonnay, Raspberry Truffle Chardonnay',
            price: 27.5,
            active:false
        },{
            name: 'All Four Collections',
            items: 'Save even more! Includes the Aromatherapy, Fruit, Holiday and Wine Collections listed above in one package.',
            price: 156,
            active:false
        }
    ];

    // THIS IS THE PART NOT WORKING
    $last = function(s){
        angular.forEach($scope.candles, function(){
                $removeClass('active');
        });
        this.toggleActive();
    };
    // END PART NOT WORKING

    $scope.toggleActive = function(s){
        s.active = !s.active;
    }

    // Calculate total price:
    $scope.total = function(){
        var total = 0;
        angular.forEach($scope.candles, function(s){
            if (s.active) {
                total+= s.price;
            }
        });
        return total;
    };
}

Any assistance would be greatly appreciated. Thanks!

Answer 1

This should do what you want.

http://jsfiddle.net/tKZjZ/216/

I don't see any reason you would need a different controller for this. $last is a boolean property on the isolated scope in the ng-repeat items. You can pass it to your toggleActive function to determine what to do.

Also I assume you probably also want it to clear the last item if one of the previous items is selected. You may even want it to select the last item automatically if they select all of the previous items. It's up to you.