How to create links for array elements in AngularJS

Question

I am new to AngularJS. I want to create links for elements in the array. Suggest me some code or descriptives.

app.js

  app.controller('ItemsController', function($scope) {
  $scope.message = 'Items are displayed';
  $scope.items=['Appliances','Books','Cosmetics','Home & Furniture','Mens','women','kids'];

  });

items.html

 <div  ng-controller="ItemsController">

 <p><h1>Type a letter in the input field:</h1></p>

 <p><input type="text" ng-model="test"></p>
 {{message}}
 <ul><h2>
 <li ng-repeat="x in items| filter:test">
 {{ x }}
 </li>
 </h2></ul>

 </div>

Here is the sample output for the above code. Items displayed in the output should be links.

You can use like this <a href="yoursite.com/products?item={{items[$index]}}">link</a> — Thom
– Thom, Commented May 15, 2017 at 10:10

Manas · Accepted Answer · 2017-05-15 10:35:10Z

1

If you are using routing then just create an anchor tag in the li.

 <ul>
  <h2>
      <li ng-repeat="x in items| filter:test">
        <a href="#/details/{{x}}">{{x}}</a>
      </li>
 </h2>
</ul>

In the route configuration, just handle the specific route pertaining to the item. Like if you want to display the details for the item.

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/details/:item',{
    templateUrl:'partials/details.html',
    controller: 'DetailsController'
}).
otherwise({
    redirectTo : 'yourdefaultpath'
})

Item shall be available in your controller as a routeParam and then you can display your data accordingly. Hope this helps.

edited May 15, 2017 at 10:35

answered May 15, 2017 at 10:27

Manas

8481 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cнŝdk · Accepted Answer · 2017-05-15 10:25:02Z

0

You can use ui-sref and declare your items as states using ngRoute in your app, this is how would be your code:

<ul>
    <li ng-repeat="x in items| filter:test">
      <a ui-sref="{{x}}"><h2>{{ x }}</h2></a>
    </li>
</ul>

Update your JS to add the states, like this:

app.config(function($stateProvider) {
  $stateProvider.state('Appliances', {
    url: 'Appliances',
    templateUrl: 'app/views/appliances.html'
  });
});

answered May 15, 2017 at 10:25

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Collectives™ on Stack Overflow

How to create links for array elements in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related