Question

我正在为我的Ionic应用程序构建一个购物车，除了运行的逐项总计之外，我们已经弄明白了。我将我的数组项默认为活动：false并且在单击时它们变为活动状态：true并将其价格值添加到运行总计中。但是我还希望有一个列表列表可用产品名称。我添加了一个新功能，它将保存活动服务及其价格值。当我尝试自己拥有每个项目时出现问题使用ng-repeat ..下面的行是相应的代码片段。我知道这是我基本缺少的东西所以请看看..谢谢

<ion-view view-title="Shop" ng-controller="OrderFormController">
<ion-content>

    <div class="card">
        <ion-item ng-repeat="service in services">
            {{totalDetail()}}
        </ion-item>
    </div>

    <div class="card">
        <ion-item ng-repeat="service in services">
            {{service.name}}
                <button class="button button-outline button-small button-stable" ng-click="toggleActive(service)" ng-class="{active:service.active}">
                    {{service.price | currency}}
                </button>
        </ion-item>
    </div>

    <div class="card">
        <ion-item>
            <!-- Calculate the total price of all chosen services. Format it as currency. -->
            Total: {{total() | currency}}
        </ion-item>
    </div>

</ion-content>

myApp.controller('OrderFormController', function($scope) {

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.services = [
    {
        name: 'Espresso',
        price: 27,
        active:false
    },{
        name: 'Americano',
        price: 36,
        active:false
    },{
        name: 'Macchiato',
        price: 57,
        active:false
    },{
        name: 'Cappuccino',
        price: 42,
        active:false
    },{
        name: 'Mocha',
        price: 55,
        active:false
    },{
        name: 'Latte',
        price: 39,
        active:false
    },{
        name: 'Chai Latte',
        price: 50,
        active:false
    }
];

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

// Helper method for calculating the total price

$scope.total = function(){

    var total = 0;

    // Use the angular forEach helper method to
    // loop through the services array:

    angular.forEach($scope.services, function(s){
        if (s.active){
            total+= s.price;
        }
    });

    return total;
};

$scope.totalDetail = function(){

    var totalDetail = "";

    // Use the angular forEach helper method to
    // loop through the services array:

    angular.forEach($scope.services, function(s){
        if (s.active){
            totalDetail+= s.name+" $"+s.price+".00 ";

        }
    });

    return totalDetail;
};

}）;

Answer 1

我想出来了..不确定它是否是最佳方式，但它有效..

ng-repeat="service in services | filter:true"

希望这有助于其他人

AngularJS离子重复。仅使用处于活动状态的服务创建新列表项

1 个答案: