AngularJS start watch po załadowaniu zawartości

Question

im in English w AngularJS. Próbuję utworzyć pierwszą aplikację i mam problem. Have lista wyboru

<div class='order-box row-fluid' ng-repeat="order in orders" ng-model="orders"> 
    <input type="checkbox" value="{{ order.id }}" ng-model="order.selected"> 
<div> 

zamówienia jest wypełnienie z serwera przez kwerendy ajax na stronie obciążenia.

function OrdersCtrl($scope, Order){ 
    $scope.orders = Order.query(); 
    $scope.$watch('orders', function(v){ 
     if (!v) return; 
     alert(v); 
    }, true); 
} 

głównym celem jest Oblicz koszt wybranych pól wyboru.

Ale na stronie ładowania widzę ostrzeżenia, jak zacząć oglądać tylko po zawartości ładunku?

Drugie pytanie litle: Czy NG-repeat na div. A wszystkie powtarzające się jednostki DIV, takie jak

Czy to normalne?

Answer 1

Spróbuj dodać flagę lub wypróbuj ją na jsfiddle link.

function OrdersCtrl($scope, $timeout) { 
    $scope.orders = []; 
    var first = true; //this doesn't belong to any scope, it will be deallocated after the current cycle. 

    var ajax = function() { 
     $scope.orders = [{ 
      id: 1, 
      selected: true 
     }, { 
      id: 2, 
      selected: true 
     }, { 
      id: 3, 
      selected: true 
     }, { 
      id: 4, 
      selected: true 
     }]; 
    }; 

    $scope.$watch('orders', function (n, o) { 
     if (first) { 
      $timeout(ajax, 2000); //simulate the ajax call. Assume data comes back in 2 seconds. 
     } else { 
      alert(n); 
     } 
    }); 
} 

Answer 2

1. Nie ma sposobu, aby uniknąć pierwszego połączenia; Musisz użyć flagi, aby ją pominąć.
2. Zawsze będzie również drugie połączenie. Wtedy zapełni się orders. Aby tego uniknąć, możesz sprawdzić, czy oldVal jest pustą tablicą.
3. Myślę, że powinieneś obejrzeć właściwość selected; nie wszystkie właściwości zamówienia.
4. Zegarek powinien porównywać wartości, a nie instancje; stąd true param na $watch

Oto kod z niestandardowych watch funkcji:

// watch only order.selected 
var watch = function(o) { 
    var mapped = _.map(o.orders, function(o){ 
    return o.selected || false; 
    }); 
    return mapped; 
}; 

var firstWatch = true; 
$scope.$watch(watch, function(newVal, oldVal) { 
    if (firstWatch || oldVal.length === 0) { 
     firstWatch = false; 
     return; 
    } 
    console.log('changed', newVal, oldVal); 
}, true); 

Zobacz ten przykład: http://plnkr.co/edit/q29mXXcdHRYHG9frvfNC?p=preview. Nie ma nic zalogowanego do konsoli, dopóki nie sprawdzisz przedmiotu.