Question

为什么这不起作用？

控制器：

$scope.dates = ['1-1-2017', '2-1-2017'];

模板：

<tr>
  <td ng-repeat="date in dates">
    {{ date }}
  </td>
</tr>

但它适用于<div>：

<div ng-repeat="date in dates">
  {{ date }}
</div>

Answer 1

这是因为你没有使用<table>作为父元素绑定，所以试试这个：

<table>
    <tr>
        <td ng-repeat="date in dates">
            {{date}}
        </td>
    </tr>
</table>

<强>更新：

https://jsfiddle.net/avnesh2/srzof334/1/

请参阅此内容并尝试删除table，然后检查。请参阅detail

它适用于你。

Answer 2

您的代码嵌入标记 <table> 中时可以正常工作

var testApp= angular.module('test',[])
angular.module('test').controller('testCtrl',function($scope){
$scope.dates = ['1-1-2017', '2-1-2017'];
})

<!doctype html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
</head>

<body ng-app="test">
  <div ng-controller="testCtrl">
  <table>
 <tr>
    <td ng-repeat="date in dates">
      {{date}}
    </td>
  </tr>
</table>
  </div>
</body>

</html>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TASKS</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller="sample1Controller">
<div>
   <table>
   <span> ng-repeat in table:</span>
   <tr ng-repeat="date in dates">
    <td>
      {{date}}
    </td>
    </tr>
   </table>
   </div>
   <div>
   <span>ng-repeat in div:</span>
   <div ng-repeat="date in dates">
  {{date}}
</div>
</div>

</body>
<script>
var app=angular.module("app",[]);
app.controller("sample1Controller",["$scope",function($scope){
$scope.dates = ['1-1-2017', '2-1-2017'];

}]);


</script>
</html>

ng-repeat创建表数列失败

3 个答案: