CODEWITHSUNDEEP
htmlangularjsangularjs-directive
Ashwin
Ashwin

Reputation: 12411

Giving id to the element repeated

I am using ng-repeat in angularJS to create elements. I want to apply id to the element which is repeated, in this case li

HTML Code:

<li id="{{item}}" ng-repeat="item in itmes"></li>

All the syntax and declaration is perfect in my code. However, the above code does not work. I want below output to be generated. If items = ['one', 'two', 'three']

<li id="one" ng-repeat="item in items">...</li>
<li id="two" ng-repeat="item in items">...</li>
<li id="three" ng-repeat="item in items">...</li>

Is it possible using angularJS?

Upvotes: 1

Views: 79

Answers (2)

Shohel
Shohel

Reputation: 3934

Try this

<li ng-attr-id="{{item}}" ng-repeat="item in itmes"></li>

EDIT

Here is the

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <h1>Hello Plunker!</h1>
    <div ng-controller="testCtrl">
        <ul>
            <li ng-attr-id="{{item}}" ng-repeat="item in items">{{ item }}</li>
        </ul>
    </div>
</body>

</html>

JS

// Code goes here
(function () {
    'use strict';

    var app = angular.module('app', []);

    app.controller('testCtrl', ['$scope',
      function ($scope) {
          $scope.items = ['one', 'two', 'three'];
      }
    ]);

})();

and output

enter image description here

and plunker

http://plnkr.co/edit/M6BDcJ2csgBR4C9TNdbz?p=preview

Upvotes: 2

Nitish Kumar
Nitish Kumar

Reputation: 4870

you have typo in items.

<li id="{{item}}" ng-repeat="item in itmes"></li>

 item in `itmes`

change this to items and try.

DEMO

Upvotes: 2

Related Questions