如何访问angularjs承诺中的数据?

时间:2015-07-03 09:56:04

标签: javascript angularjs angular-material

我正在尝试访问返回承诺数据,但即使我正在访问正确的元素,它总是会给我undefined

这就是我必须这样做的原因。

controller.js

 // can't access the data "tastes" in success outside from the .success call 
 // so i return the entire http call and access it later 
function loadContacts() {
      var contacts;
      return Account.getTastes()
              .success(function(tastes) {
              contacts= tastes[0].tastes;
              return contacts.map(function (c, index) {
                var colors = ["1abc9c", "16a085", "f1c40f", "f39c12", "2ecc71", "27ae60", "e67e22","d35400","3498db","2980b9","e74c3c","c0392b","9b59b6","8e44ad","34495e","2c3e50"];
                var color = colors[Math.floor(Math.random() * colors.length)];
                var cParts = c.split(' ');
                var contact = {
                  name: c,
                  image: "http://dummyimage.com/50x50/"+color+"/f7f7f7.png&text="+c.charAt(0)
                };
                contact._lowername = contact.name.toLowerCase();
                return contact;
              });
              })
              .error(function(error) {
                console.log("Error:"+error)
              });

    }


/**
 * Search for contacts.
 */
function querySearch (query) {
  var results = query ?
      $scope.allContacts.filter(createFilterFor(query)) : [];
  return results;
}
/**
 * Create filter function for a query string
 */
function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);
  return function filterFn(contact) {
    return (contact._lowername.indexOf(lowercaseQuery) != -1);;
  };
}

$scope.allContacts = loadContacts(); 
 console.log($scope.allContacts)
$scope.tags = [$scope.allContacts[0],$scope.allContacts[1]];
 // since $scope.allContacts is undefined thus, 
 //i'm having error for trying to access element[0] of undefined 

console.log($ scope.allContacts)结果是 enter image description here

但是当我尝试像$scope.allContacts.$$state.value.data那样访问它时,我得到undefined作为回报。我可以知道这是什么解决方案吗?

在我的HTML中

<md-contact-chips required ng-model="tags" md-contacts="querySearch($query)" md-contact-name="name" md-contact-image="image"  filter-selected="true" placeholder="Thai, chinese, cheap, cafe and etc">
 </md-contact-chips> 

更新:1(已解决)

我将代码更改为

后出现此错误
 $scope.allContacts.then(function(contacts){
      $scope.tags = [contacts[0],contacts[1]];
  })

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $chip in $mdChipsCtrl.items, Duplicate key: undefined:undefined, Duplicate value: undefined 

我甚至没有使用ng-repeat为什么我仍然会出现ng-repeat错误?

更新:2 enter image description here 芯片现在正在显示但是我无法搜索,当我尝试搜索md-contact-chips时发生了这种情况 enter image description here

2 个答案:

答案 0 :(得分:2)

你应该可以访问这样的联系人......

$scope.allContacts.then(function(contacts){
  console.log(contacts[0]);
  console.log(contacts[1]);
})

如果你改变了

Account.getTastes().success

Account.getTastes().then

最终结果

function loadContacts() {
      var contacts;
      return Account.getTastes()
              .then(function(res) {
              contacts = res.data[0].tastes;
              return contacts.map(function (c, index) {
                var colors = ["1abc9c", "16a085", "f1c40f", "f39c12", "2ecc71", "27ae60", "e67e22","d35400","3498db","2980b9","e74c3c","c0392b","9b59b6","8e44ad","34495e","2c3e50"];
                var color = colors[Math.floor(Math.random() * colors.length)];
                var cParts = c.split(' ');
                var contact = {
                  name: c,
                  image: "http://dummyimage.com/50x50/"+color+"/f7f7f7.png&text="+c.charAt(0)
                };
                contact._lowername = contact.name.toLowerCase();
                return contact;
              });
              })
              .error(function(error) {
                console.log("Error:"+error)
              });

    }

$scope.allContacts = loadContacts(); 
 console.log($scope.allContacts)
 $scope.allContacts.then(function(contacts){
   console.log(contacts[0]);
   console.log(contacts[1]);
 })

答案 1 :(得分:0)

这里的主要问题似乎是当你试图访问该值时,承诺尚未解决,所以我想它应该足以包装

$scope.tags = [$scope.allContacts[0],$scope.allContacts[1]];

类似

$scope.allContacts.then(function(){
    $scope.tags = [$scope.allContacts[0],$scope.allContacts[1]];
}