0

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

我所拥有的是一个 ng-repeat 生成的项目列表（“蜡烛中的蜡烛”），带有一个简单的切换来选择/取消选择每个项目和一个“总计”控制器来汇总所选项目。我想要做的是使用 $last 隔离最后一个 <li> 项目并将唯一的“清除所有先前”切换绑定到该 $last 项目。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). 换句话说，最后一项应充当“清除所有先前的选择”单击以及自切换。

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

任何帮助将不胜感激。谢谢！

4

1 回答 1

1

这应该做你想要的。

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

我看不出有任何理由需要为此使用不同的控制器。$last是ng-repeat项目中隔离范围的布尔属性。您可以将其传递给您的toggleActive函数以确定要执行的操作。

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

于 2014-03-09T17:44:54.043 回答