Trying to use ng-repeat, where am I going wrong?

Question

Trying to use ng-repeat, where am I going wrong?

I have begun with the code from angular-seed, and am slowly changing it. My goal is to make a simple spreadsheet application. In angular-seed/app/index.html I added the following code to begin with:

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

That did what I wanted, but I thought I would try to take what I have learned from the John Lindquist tutorial and apply it. So I changed the above:

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

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

</span>

and I added the following controller to 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'}
   ];

}

And now I only get one text field with the literal string entryField.pHolder. I first suspected I wasn't using the right syntax for the ng-model element. I'm following the pattern from the tutorial, so I am confident that is correct. Then, I made sure I closed the <span> properly, and I believe that checks out. I'm new to not only angular-js, but javascript as well (plus only passingly familiar with html), so I suspect this is where the problem lies. I'm not sure how to pin-point the problem. Is it glaring? Could someone point out what I've done wrong? Below is the entire index.html for reference.

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

angularjs

Answer 1

You should replace this:

placeholder="entryField.pHolder"

with:

placeholder="{{entryField.pHolder}}"

I am not sure what do you use the tag "ng-model" for in this case. But it should work then.