Question

我在<tr>标签上使用ng-repeat，用从mysql中提取的数据填充<td>标签并转换为Json。这很好用。但是，我正在使用的<td>个标记之一包含一个按钮。

我想做的是，在DOM中以某种方式识别每个按钮，以便我可以针对特定请求进行定位。

示例：页面加载，ng-repeat重复按钮4次。这些按钮中的每一个都会附加一个ng-click。我希望他们每个人都能打开并过滤json文件中的不同信息。

我是否正确假设ng-repeat只是为每个按钮打开相同的项目，我将如何将它们分开？感谢。

Answer 1

你可以在前端做这样的事情：

<button ng-repeat="item in items track by $index" ng-click="someFunction($index)" >Something happens</button>

然后在你的控制器中：

$scope.someFunction = function (index) {
    if (index === 1):
        // etc.
    else...
        // Or use switch, whichever works for you.

Answer 2

您可以在数组中的每个项目上创建特定的功能。

<button ng-repeat="button in buttons" ng-click="button.functionName()">{{button.name}}</function>

Answer 3

这是$ index。对你的任何ng-repeat来说，这是一个非常好的习惯。如果你的按钮UI在DOM加载后不受修改，也不要忘记bind-once。

 <ul>
    <li ng-repeat="page in pages">
        <a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }} - index is : {{$index}}</a>
    </li>
</ul>

http://jsfiddle.net/bonatoc/4z1t4gsm/3/

你也可以（使用bind-once）：

<button 
ng-repeat="button in ::buttons track by $index" 
id="button_{{$index}}" 
class="{{button['css_class']}}"

...鉴于您的按钮也是一个JSON对象（请注意，ng-repeat喜欢数组，而不是对象。对象数组很好）：

 $scope.buttons = [
   0: {
        'css_class': someClass,
        'functionToTrigger': function(...

// ...

Angular.js ng-repeat唯一标识符

3 个答案: