AngularJS सामग्री लोड करने के बाद घड़ी शुरू करें

Question

AngularJS में नया है I पहला ऐप बनाने की कोशिश कर रहा है, और समस्या है। चेक बॉक्स

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

आदेशों की Have सूची लोड पृष्ठ पर ajax क्वेरी द्वारा सर्वर से भरना है।

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

प्राथमिक लक्ष्य चयनित चेकबॉक्स द्वारा लागत की गणना की जाती है।

लेकिन लोड पेज पर मैं अलर्ट देखता हूं, लोड सामग्री के बाद ही कैसे शुरू होता है?

दूसरा लिटल प्रश्न: div पर ng-repeat है। और सभी दोहराव divs जैसे

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

क्या यह सामान्य है?

Answer 1

ध्वज जोड़ने का प्रयास करें, या इसे 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. कोई रास्ता नहीं पहली कॉल से बचने के लिए नहीं है; आपको उस को छोड़ने के लिए ध्वज का उपयोग करना होगा।
2. हमेशा एक दूसरी कॉल भी होगी। वह तब होता है जब orders पॉप्युलेट हो जाता है। उस से बचने के लिए, आप जांच सकते हैं कि oldVal एक खाली सरणी है या नहीं।
3. मुझे लगता है कि आपको selected संपत्ति देखना चाहिए; आदेश के सभी गुण नहीं।
4. घड़ी को मूल्यों की तुलना करना चाहिए, उदाहरण नहीं; इसलिए $watch

पर true परम यहाँ एक कस्टम watch समारोह के साथ कोड है: http://plnkr.co/edit/q29mXXcdHRYHG9frvfNC?p=preview:

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

इस उदाहरण देखें। कंसोल में कुछ भी लॉग इन नहीं किया जाता है जब तक आप वास्तव में कोई आइटम चेक नहीं करते।