Here is another ng-repeat example in AngularJS. It actually takes a dataset which contains some search engine links with Description and provide link to the actual URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<!--<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
myApp=angular.module("myApp",[]);
myApp.controller("DemoController",function($scope) {
$scope.Links = [
{"Name":"Google","LinkURL":"https://www.google.com"},
{"Name":"Yahoo","LinkURL":"https://search.yahoo.com"},
{"Name":"Bing","LinkURL":"https://www.bing.com"}
];
});
</script>
</head>
<body ng-app="myApp">
<!-- Put your html here! -->
<h1>Basic plunk!</h1>
<p>The top search engine to work with!</p>
<ul ng-controller="DemoController">
<li ng-repeat="link in Links"><a href={{link.LinkURL}}>{{link.Name}}</a></li>
</ul>
</body>
</html>
Here is the preview of the above code..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<!--<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
myApp=angular.module("myApp",[]);
myApp.controller("DemoController",function($scope) {
$scope.Links = [
{"Name":"Google","LinkURL":"https://www.google.com"},
{"Name":"Yahoo","LinkURL":"https://search.yahoo.com"},
{"Name":"Bing","LinkURL":"https://www.bing.com"}
];
});
</script>
</head>
<body ng-app="myApp">
<!-- Put your html here! -->
<h1>Basic plunk!</h1>
<p>The top search engine to work with!</p>
<ul ng-controller="DemoController">
<li ng-repeat="link in Links"><a href={{link.LinkURL}}>{{link.Name}}</a></li>
</ul>
</body>
</html>
Here is the preview of the above code..
No comments:
Post a Comment