数组中对象的 Ng-repeat 不起作用答案

【问题标题】：Ng-repeat of Objects in Array doesn't work数组中对象的 Ng-repeat 不起作用
【发布时间】：2016-06-10 17:59:02
【问题描述】：

我有一个从服务器检索到的对象数组。查询有效，但是当我在 html 视图中执行 ng-repeat 时，它不起作用，它不显示任何内容。为什么？这是js代码：

$scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;

    CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
        if (companyListDetail) {
            $scope.companyList = companyListDetail;
        }
    });
};

$scope.getCompanyList();

HTML 代码：

   <tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>

这是 companyListDetail 数组（来自服务器的响应）：

companyListDetail: Array[2]
  0: Object
  1: Object
  length: 2

这是0: Object：

email: "text@text.com"
name: "Compant 2"

在控制台中我没有错误，在浏览器的 html 页面中我有这个：

<!-- ngRepeat: company in companyList -->

【问题讨论】：

看不到明显错误。尝试检查下一个： 1.你如何使用异步调用？使用 $http?尝试把 $timeout(function(){$scope.companyList = companyListDetail;}) ; 2. 把 console.log(companyListDetail) 放在 function (companyListDetail) { 之后
在调用$scope.getCompanyList()函数后放入console.log($scope.companyList)，查看数据是否可用。问题可能是数据（companyList）不可用于 ng-repeat
通过console.log($scope.companyList)检查$scope.companyList = companyListDetail;，因为它是否具有相同的对象数组。
@Vitalii 我可以看到这个日志：[Object, Object] 0: Object 1: Object
我已经解决了写'$scope.$apply()'

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

$scope.companyList.length = 0; // This line is good, it empties the array without modifying the reference

CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
    if (companyListDetail) {
        $scope.companyList = companyListDetail; // this line is bad, you assign $scope.companyList to a new reference
    } 
});

这里的问题是，角度 $watch 机制检查对象是否已更改但只记住了他的第一个引用。

console.log() 起作用的原因是因为你给这个函数你的对象的新引用。

你可以做的是：

if (companyListDetail) {
     for (var i = 0; i< companyListDetail; i++){
         $scope.companyList.push(companyListDetail[i]);
     }
}

【讨论】：

它被视为$scopes 属性。我想简单的$scope.$apply() 会解决它。
@vp_arth $scope.$apply() 将起作用，但会触发对应用程序的所有 $watches 的完整检查。它降低了性能，并且如果应用程序已经在进行中，则可能会引发异常。你永远不应该使用 $apply！
Deblaton 谢谢你，但它还不起作用......我认为这是因为我正在做异步调用，因为我正在使用 couchdb
异步调用应该返回一个承诺。
那么我将返回两个元素，companyListDetail 和 Promise？

【解决方案2】：

试试这个吧：

您忘记在Html 中添加<table> 标签。

HTML：

<div ng-app ng-controller="LoginController">
<table>
<tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>
</table>

</div>

脚本：

function LoginController($scope) {
  $scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;
    var companyListDetail = [{
  email: "sidhantc@google.com",
  name: "Sidhant"
  },
  {
  email: "sid@google.com",
  name: "Chopper"
  }]

            $scope.companyList = companyListDetail;
            console.log($scope.companyList);
};

$scope.getCompanyList();
}

工作演示：https://jsfiddle.net/Lt7aP/2864/

【讨论】：

在我的 html 中，我正确地编写了，我刚刚选择了一段代码！真正的问题是有异步调用