AngularJS avvia l'orologio dopo aver caricato il contenuto

Question

im new in AngularJS. Provare a creare la prima app e avere un problema. Hanno elenco delle caselle

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

ordini si sta riempiendo dal server di query a pagina ajax carico.

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

obiettivo primario è il costo calcolare da caselle di controllo selezionati.

Ma nella pagina di caricamento viene visualizzato un avviso, come guardare solo dopo aver caricato il contenuto?

Seconda domanda: Avere ng-repeat su div. E tutte le div ripetenze come

<div class="order-box row-fluid ng-scope ng-pristine ng-valid" ng-repeat="order in orders" ng-model="orders"> 

È normale?

Answer 1

Prova ad aggiungere una bandiera o prova su 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. Non v'è alcun modo per evitare la prima chiamata; Devi usare una bandiera per saltare quella.
2. Ci sarà sempre anche una seconda chiamata. Questo è il momento in cui il numero orders viene popolato. Per evitare quello, è possibile verificare se oldVal è un array vuoto.
3. Penso che dovresti guardare la proprietà selected; non tutte le proprietà di un ordine.
4. L'orologio deve confrontare valori, non istanze; da qui il true param su $watch

Ecco il codice con una funzione personalizzata watch:

// 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); 

Vedi questo esempio: http://plnkr.co/edit/q29mXXcdHRYHG9frvfNC?p=preview. Non è registrato nulla nella console finché non si verifica effettivamente un elemento.