如何在AngularJS中为$ last分配一个唯一的控制器?

时间:2014-03-09 17:07:55

标签: angularjs angularjs-ng-repeat angularjs-ng-click

首先,我是AngularJS的新手,所以请耐心等待。我一直在阅读文档并通过一些在线教程来尝试至少掌握基础知识,但这个特殊问题令我难过。我甚至不确定我想做什么是可能的。我已经做了两天,并尝试了各种解决方案,包括隔离最后一个< li>通过它的名称属性,使用经典的for循环迭代其他,使用angular forEach循环其他,等等。我希望有人在这里可以帮助我。

我所拥有的是ng-repeat生成的项目列表(“蜡烛中的蜡烛”),其中包含用于选择/取消选择每个项目的简单切换以及用于总计所选项目的“总计”控制器。我想要做的是隔离最后一个< li> item使用$ last并绑定一个唯一的“clear all previous”切换到该$ last项。当选择(或“激活”)时,单独最后一项的控制器应该查看前面的项目并取消选择所选的任何项目(从而将它们从总计中移除)。换句话说,最后一项应该充当“清除以前所有选择”的点击以及自我切换。

“last”类正在渲染,但我很难将其隔离并将其绑定到自己的函数。同时,由于一般的切换继续工作,我得到“无声失败”,不提供任何控制台线索,我正在做错。

到目前为止,这是我的代码:http://jsfiddle.net/codesushi156/tKZjZ/215/ 我评论说明了失败的部分:

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

非常感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

这应该做你想要的。

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

我认为你不需要为此设置不同的控制器。 $lastng-repeat项中隔离范围的布尔属性。您可以将其传递给toggleActive函数以确定要执行的操作。

此外,我假设如果选择了之前的某个项目,您可能还希望它清除最后一项。如果他们选择所有以前的项目,您甚至可能希望它自动选择最后一项。这取决于你。