javascript - 如何访问 angularjs promise 中的数据?

标签 javascript angularjs angular-material

我正在尝试访问返回 promise 数据,但它总是给我 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

最佳答案

您应该能够像这样访问联系人...

$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]);
 })

关于javascript - 如何访问 angularjs promise 中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31203861/

相关文章:

javascript - 启动 Mailchimp 邪恶弹出 onclick

javascript - Javascript 中的属性值

javascript - ng-repeat 显示第一个选项的默认空值

javascript - Angular $http.query 使用数组作为参数?

angular - 错误 : node_modules/@angular/material/core/common-behaviors/constructor. d.ts:14:64 - 错误 TS1005: ';' 预期

angularjs - Angular Materials - MD 内容滚动后的页脚

javascript:无法将 oncontextmenu 属性设置为预定义函数

javascript - 如何根据事件显示此选项卡内容

javascript - 如何在数组中存储元素?

angular-material - Material 列表在移动设备中不滚动