Question

我有一个根据状态键排序的订单列表。然后，我使用ng-repeat在栏中显示它。我可以单击“接受”按钮将一个订单从已提交移至接受。问题是：如何刷新显示接受订单的栏？

HTML

    <div class="bar" ng-controller="AdminCtrl">
        <li ng-repeat="order in submitted">
            <div  >
                <p >{{order.name}} </p>
                <p>{{order.total}}</p>
                <button class="btn" ng-click="acceptOrder(order)">Akceptuj</button>
            </div>
        </li>
    </div>

    <div class="bar" ng-controller="AdminCtrl" >
        <li ng-repeat="order in delivery">
            <div >
                <p >{{order.name}} </p>
                <p>{{order.total}}</p>
                <button class="btn" ng-click="addOrderToDeliveryQueue(order)">Dodaj do kolejki dostawy</button>
            </div>
        </li>
    </div>

</div>

JS

    $scope.submitted = [];
    $scope.accepted = [];
    $scope.delivery = [];


    angular.forEach($scope.orders, function(value, key) {
        if (value.status == 'submitted')
            $scope.submitted.push(value);
        if (value.status == 'accepted')
            $scope.accepted.push(value);
        if (value.status == 'delivery')
            $scope.delivery.push(value);
    });

    $scope.acceptOrder = function(order) {
        var index = $scope.submitted.indexOf(order);
        order.status = 'accepted';
        $scope.accepted.push(order);
        $scope.submitted.splice(index, 1);

Answer 1

AngularJS在看到集合中的更改时会自动处理刷新的ng-repeat指令。您没有看到这种现象，因为您实际上是在创建AdminCtrl控制器的多个独立实例。您的每个div都有：ng-controller="AdminCtrl"。这将创建一个AdminCtrl的新实例，范围为该div。您真正想要的是该AdminCtrl的一个实例。您可以通过将ng-controller指令移到最外面的容器元素来实现此目的。

<div ng-controller="AdminCtrl">
    <div class="bar">
        <li ng-repeat="order in submitted">
            // your markup
        </li>
    </div>
    <div class="bar">
        <li ng-repeat="order in accepted">
            // your markup
        </li>
    </div>
</div>
// etc.

添加元素后刷新ng-repeat列表

1 个答案: