Recently, I created a project using ng-repeat with AngularJS 1.x, and it was smooth sailing.
JavaScript:
var app = angular.module('myModule', []);
app.controller('myController', function() {
this.dishes = [
{
'name': 'CD',
'drink': 'wine',
'color': 'red'
},
{
name: 'vagetable',
drink: 'water',
color: 'blue'
},
{
'name': 'meat',
'drink': 'coffee',
'color': 'brown'
}
];
});
HTML:
<html lang="en" ng-app="myModule">
<head></head>
<body ng-controller="myController as myCtrl">
<div> {{myController.dishes}} </div>
<ul>
<li ng-repeat="dish in myCtrl.dishes">
<p> {{dish.name}} is my name.</p>
<p> {{dish.drink}} is something you can drink.</p>
<p> {{dish.color}} is the color I wear.</p>
<hr>
</li>
<p> {{myCtrl.theModelContent}}</p>
<input type='text' ng-model="myCtrl.theModelContent">
</ul>
</body>
</html>
I observed that both 'name': 'CD' and name: 'vegetable' work without any issues. Curious to know what sets them apart?