Wednesday 7 January 2015

Another ng-repeat example for AngularJS.

angularjs
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..


Basic plunk!

The top search engine to work with!

No comments: