2016-12-30 46 views
0

爲什麼這不起作用?ng-repeat創建表列與陣列失敗

控制器:

$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> 
+0

我認爲你的問題可能會有所不同。在此發佈您的所有代碼。 – plvice

+0

您的代碼有效。不要忘記'

'元素http://jsfiddle.net/ADukg/8842/ – Alexis

回答

0

當它被嵌入到標籤內,您的代碼工作<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>

0

<!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>

2

這是因爲您不使用<table>父元素綁定,那麼試試這個:

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

更新

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

看到此並嘗試刪除table然後檢查。請參閱detail

它適用於您。