尝试使用ng-repeat,我哪里出错了?

时间:2012-12-01 00:39:36

标签: angularjs

我已经开始使用angular-seed的代码,并且正在慢慢改变它。我的目标是制作一个简单的电子表格应用程序。在angular-seed/app/index.html中,我添加了以下代码:

<input type="text" ng-model="KID" placeholder="ID goes here">

<input type="text" ng-model="DESC" placeholder="Description goes here">

<input type="text" ng-model="DDD" placeholder="Drop Dead Date goes here">

这就是我想要的,但我想我会尝试从John Lindquist教程中学到并应用它。所以我改变了上面的内容:

<span ng-repeat="entryField in entryFields">

<input type="text" ng-model="entryField.ngmodel" placeholder="entryField.pHolder">

</span>

我将以下控制器添加到angular-seed/app/js/controllers.js

function DataEntryCtrl($scope) {
   $scope.entryFields = [
       {pHolder:'ID goes here',ngmodel:'KID'},
       {pHolder:'Description goes here',ngmodel:'DESC'},
       {pHolder:'Drop Dead Date goes here',ngmodel:'DDD'}
   ];

}

现在我只得到一个带有文字字符串entryField.pHolder的文本字段。我首先怀疑我没有使用ng-model元素的正确语法。我正在遵循教程中的模式,所以我确信这是正确的。然后,我确保我正确地关闭了<span>,我相信会结账。我不仅是angular-js的新手,也是javascript的新手(加上只是熟悉html),所以我怀疑这就是问题所在。我不确定如何指出问题所在。它瞪眼了吗?有人能指出我做错了什么吗?以下是整个index.html以供参考。

<!doctype html5>
<html lang="en" ng-app="myApp">
<head> 
  <meta charset="utf-8">
  <title>SpreedSheet Demo</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div ng-controller="DataEntryCtrl">

   <span ng-repeat="entryField in entryFields">
      <input type="text" ng-model="entryField.ngmodel" placeholder="entryField.pHolder">
   </span>
   <div ng-view></div>
</div>

  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

你应该替换它:

placeholder="entryField.pHolder"

使用:

placeholder="{{entryField.pHolder}}"

在这种情况下,我不确定你使用的是什么标签“ng-model”。 但它应该适用。