CODEWITHSUNDEEP
javascriptjqueryangularjs
ObiVan
ObiVan

Reputation: 3

How to use ng-repeat correct?

So this is my json file

{
	"title" : "My skills",
	"webStack" : [
		"HTML5",
		"CSS3",
		"JavaScript",
		"jQuery / AngularJS",
		"SASS / Stylus",
		"Bootstrap / Pure CSS"
	],
}

and this is my html file

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-controller="skillsController">
	<h1>{{skills.title}}</h1>
	<ul>
		<li ng-repeat="item in skills.webStack">
			{{skills.webStack.item}}
		</li>
	</ul>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script>
		var myApp = angular.module('myApp', []);
			myApp.controller('skillsController', function($scope, $http) {
			$http.get('skills.json').success(function(data) {
				console.log('this is data:',data);
				$scope.skills = data;
			});
		});
	</script>
</body>
</html>

but in browser I can see only an empty list how I must to correct use ng-repeat? please, say, what I must to do?

Upvotes: 0

Views: 60

Answers (1)

The Head Rush
The Head Rush

Reputation: 3357

Change {{skills.webStack.item}} to {{item}}.

In your ng-repeat you typed this: <li ng-repeat="item in skills.webStack">

So, basically, you are saying:

  • For each item in the collection skills.webStack I want to print the item itself

Upvotes: 5

Related Questions