如何在控制加載時在AngularJS中加載數據？

我有一個AngularJS控制器;在第一負載中的數據不從分貝如何在控制加載時在AngularJS中加載數據？

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) { 
 
    console.log("ProductPopupController"); 
 

 
    var allGroups = []; 
 
    $http.get('UserDetail/GetAllUsers').success(function (response) { 
 
     console.log("I got the data I requested"); 
 
     //console.log(response); 
 
     for (var i = 0; i < response.length; i++) { 
 
      allGroups.push({ 
 
       UserName: response[i].UserName, 
 
       _id: response[i]._id 
 
      }); 
 
     } 
 
    }); 
 

 

 
    console.log(allGroups); 
 

 
    var allGroups = [ 
 
        { 'UserName': 'one', '_id': 1 }, 
 
        { 'UserName': 'two', '_id': 2 }, 
 
        { 'UserName': 'three', '_id': 3 }, 
 
        { 'UserName': 'four', '_id': 4 }, 
 
        { 'UserName': 'five', '_id': 5 }, 
 
        { 'UserName': 'six', '_id': 6 }, 
 
        { 'UserName': 'sixteen', '_id': 7 }, 
 
        { 'UserName': 'seven', '_id': 8 } 
 

 
       ]; 
 

 
    console.log(allGroups);

在此代碼我正在從第二陣列的值取。沒有從數據庫中獲取。任何事件後，它將從數據庫加載。我在這裏做了什麼錯誤？

來源

2016-05-05 Pradeep

加載MD-芯片（角材）僅供參考'$ HTTP（）成功（）'和'。錯誤「已被棄用。如果您試圖在'$ http' promise鏈中途使用'.success'，它們就是包裝'.then'和'.catch'的輔助方法。應該使用'.then'和'.catch'來代替。 – ste2425

請注意，$http.get('UserDetail/GetAllUsers')是一個異步調用。您收到您的請求的回覆之前，打印出您的變量allGroups。如果在success函數的末尾添加console.log，則會看到數據已設置。

來源

2016-05-05 10:30:08

發生這種情況是因爲$http.get()是異步。您正在撥打$http.get()，然後在檢索結果之前立即撥打console.log(allGroups)。

只要數據已被檢索並且觸發了.success()，Angular將觸發摘要循環，導致數據更新並被推入數組。但是，這種情況在控制器完成後很長時間就會發生，因此數據永遠不會打印在console.log()中。

來源

2016-05-05 10:30:42 Claies

任何解決方案來實現我的負載結果？ – Pradeep

它已經在加載中發生，但瀏覽器在執行其他任務之前不會等待它加載。這是異步調用的要點。不要嘗試在'.success（）'之外登錄異步調用，而是先初始化數組* *然後將更改記錄到'.success（）'中的數組。（*注意：*'.success（）'不推薦使用，而是使用'.then（）'）。 – Claies

其實我的要求是通過使用md-autocomplete加載一個md芯片。在上面的例子中，如何通過使用.then（）來實現這一點？ – Pradeep

這是我完整的代碼使用MD-qutocomplete

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) { 
 
    console.log("ProductPopupController"); 
 

 
    var allGroups = []; 
 
    $http.get('UserDetail/GetAllUsers').success(function (response) { 
 
     console.log("I got the data I requested"); 
 
     for (var i = 0; i < response.length; i++) { 
 
      allGroups.push({ 
 
       UserName: response[i].UserName, 
 
       _id: response[i]._id 
 
      }); 
 
     } 
 
     console.log(1); 
 
     console.log(allGroups); 
 
    }); 
 

 
    console.log(2); 
 
    
 

 
    var allGroups = [ 
 
        { 'UserName': 'one', '_id': 1 }, 
 
        { 'UserName': 'two', '_id': 2 }, 
 
        { 'UserName': 'three', '_id': 3 }, 
 
        { 'UserName': 'four', '_id': 4 }, 
 
        { 'UserName': 'five', '_id': 5 }, 
 
        { 'UserName': 'six', '_id': 6 }, 
 
        { 'UserName': 'sixteen', '_id': 7 }, 
 
        { 'UserName': 'seven', '_id': 8 } 
 

 
    //   'one', 
 
    //   'two', 
 
    //   'three', 
 
    //   'four', 
 
    //   'five', 
 
    //   'six', 
 
    //   'sixteen', 
 
    //   'seven' 
 
       ]; 
 

 
    console.log(allGroups); 
 

 
    $scope.queryGroups = function (search) { 
 
     var firstPass = $filter('filter')(allGroups, search); 
 

 
     return firstPass.filter(function (item) { 
 
      return $scope.selectedGroups.indexOf(item) === -1; 
 
     }); 
 
    }; 
 

 
    $scope.addGroup = function (group) { 
 
     $scope.selectedGroups.push(group); 
 
    }; 
 

 
    $scope.allGroups = allGroups.UserName; 
 
    $scope.selectedGroups = [allGroups[0]]; 
 

 
    $scope.$watchCollection('selectedGroups', function() { 
 
     $scope.availableGroups = $scope.queryGroups(''); 
 
    }); 
 

 
    $scope.getChipInfo = function (chip_info) { 
 
     console.log(chip_info); 
 
    }

來源

2016-05-05 11:01:35 Pradeep

如何在控制加載時在AngularJS中加載數據？

回答

相關問題