给重复的元素赋予id

时间：2014-09-25 09:42:38

标签： html angularjs angularjs-directive

我在angularJS中使用ng-repeat来创建元素。我想将id应用于重复的元素，在本例中为li

HTML代码：

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

我的代码中的所有语法和声明都是完美的。但是，上面的代码不起作用。我想要生成下面的输出。如果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>

是否可以使用angularJS？

2 个答案:

答案 0 :(得分：2)

你的项目中有拼写错误。

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

 item in `itmes`

将此更改为项目并尝试。

DEMO

答案 1 :(得分：2)

试试这个

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

修改

这是

<强> 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

和plunker

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

相关问题
最新问题