角度 ng-repeat 有列表项但未在 html 中显示参数 {{}}答案

【问题标题】：angular ng-repeat has list items but not displaying parameter {{}} in html角度 ng-repeat 有列表项但未在 html 中显示参数 {{}}
【发布时间】：2017-08-01 21:22:15
【问题描述】：

我正在从 api 返回结果，即 [{姓名：“ABC”，年龄：20}，{姓名：“DEF”，年龄：25}]

$scope.names 设置为从 api 返回的数组。在浏览器中，它确实打印了 2 行，但 html 表格行中的每个单元格都是空的。为什么？

<tr ng-repeat="name in names">
    <td>{{ name.name }}</td>
    <td>{{ name.age }}</td>
</tr>

【问题讨论】：

问题出在其他地方，因为您的 cose 是正确的。您确定要将控制器与此视图绑定吗？你使用标签<table>..</table>，对吗？尝试在视图中打印{{names | json }}

标签： html angularjs

【解决方案1】：

在控制器中你有这样的东西

function CTRL($scope) {
  $scope.names=  [
  {name: "ABC", age: 20}, {name: "DEF", age: 25}];
}

这是一个对象数组，你需要像下面这样循环遍历它

<tr ng-repeat="(key,value) in names">
    <td>{{ value.name }}</td>
    <td>{{ value.age }}</td>
</tr>

检查下面的演示

angular.module("myApp", []).controller(CTRL); 

function CTRL($scope) {
  $scope.names =  [
  {name: "ABC", age: 20}, {name: "DEF", age: 25}];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
 <div ng-controller="CTRL">
<table>
<tr ng-repeat="(key,value) in names">
    <td>{{ value.name }}</td>
    <td>{{ value.age }}</td>
</tr>

</table>
</div>

【讨论】：

(key,value) in names 用于对对象属性进行交互。没有必要使用它，因为这是一个数组。
你也可以用它来迭代对象数组

【解决方案2】：

你可以这样：

       <!DOCTYPE html>
       <html>
       <script
          src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
       <body>
         <div ng-app="myApp" ng-controller="myCtrl">
          <table>
           <tr>
            <td>{{name of names}}</td>
            <td>{{age of names}}</td>
           </tr>
          </table>
         </div>
         <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope){
              $scope.names =[{name:"ABC", age: 20}, {name: "DEF", age: 25}]
            });
         </script>
       </body>
       </html>

【讨论】：

【解决方案3】：

您可以只取值而不是取整个 (key, value) 对。

HTML：

 <!DOCTYPE html>
   <html>
   <script
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <body>
     <div ng-app="myApp" ng-controller="myCtrl">
      <table>
       <tr ng-repeat="val in names">
        <td>{{val.name}}</td>
        <td>{{val.age}}</td>
       </tr>
      </table>
     </div>
     <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope){
          $scope.names =[{name:"ABC", age: 20}, {name: "DEF", age: 25}]
        });
     </script>
   </body>
   </html>

【讨论】：

【解决方案4】：

你的代码对我来说似乎可行，不确定你在控制器中正确绑定

angular.module("myApp", []).controller(CTRL); 

function myCtrl($scope) {
  $scope.names =  [{name: "ABC", age: 20}, {name: "DEF", age: 25}];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
 <div ng-controller="myCtrl">
<table>
<tr ng-repeat="name in names">
    <td>{{ name.name }}</td>
    <td>{{ name.age }}</td>
</tr>

</table>
</div>

【讨论】：