angularJs-具有自定义ID的ngRepeat

Question

Edit:

So, after messing around with the code and following everyones advice, I found out that, indeed, the id -does- work, but somethign else blocks it.

This is the entire line of code, now: where is the problem located?

<tr id="{{item.id}}" 
    ng-mouseover="hovering(item.id)" 
    ng-mouseleave="leaving(item.id)"  
    ng-show="showRow(item)" 
    ng-repeat="item in elements| limitTo: limiter"  
    data-id="{{item.id}}" 
    data-parent="{{item.parent}}">

HTML:

<table>
    <tr ng-repeat="item in users| limitTo: limiter" id="{{item.id}}">
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>
    </tr>
</table>

DATA:

$scope.users = [
    { id: 1, name: "user", email : ""},
    { id: 2, name: "anotherUser", email: ""}];

Problem:

the ID stays "{{item.id}}" and isn't converted to, eg: "1". I tried with ng-attr-id as well, but it didn't work either.

Why isn't the ID "transformed" to what it should be?

To bring the problem a bit further: if I do data-id="{{item.id}} , it DOES work.

Answer 1

All seems to Work

 angular.module('app', []) .controller('ctrl', ["$scope", function($scope) { $scope.limiter = 4; $scope.users = [{ id: 1, name: 'n1' }, { id: 2, name: 'n2' }, { id: 3, name: 'n3' }, { id: 4, name: 'n4' }, { id: 5, name: 'n5' }, { id: 6, name: 'n6' }]; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table ng-app="app" ng-controller="ctrl"> <tr ng-repeat="item in users| limitTo: limiter" id="{{item.id}}"> <td>Id - {{item.id}}</td> <td>Name - {{item.name}}</td> </tr> </table> 

Answer 2

My previous answer is very poor, But some one put up vote. lol.

okay finally i got the issue.

You need to change var users = [...] to $scope.users=[...];

Update

• Did you assign controller and ng-app in you html side?

• try to use $scope.$apply() in your controller.

  $scope.users = [ { id: 1, name: "user", email : ""}, { id: 2, name: "anotherUser", email: ""}]; $scope.$apply();