AngularJS中ng-repeat的$index在md-button的ng-click属性中无法替换

嗨，这个问题我之前帮别人排查过好几次，其实是AngularJS对不同类型属性的解析规则不一样导致的，咱们一步步拆解：

1. 先搞懂AngularJS的两种属性解析逻辑 #

AngularJS对属性的处理分两类，规则完全不同：

• Angular指令属性（比如ng-click、ng-show、ng-class）：这些属性的值本身就是Angular的表达式，会直接被Angular解析执行，不需要额外的插值语法。
• 原生HTML属性（比如id、src、class）：浏览器会直接把它们当成字面量处理，不会自动解析Angular的插值表达式，必须用特殊语法触发解析。

2. 针对你的问题逐个解决 #

（1）ng-click属性里的$index无法替换 #

你大概率是在ng-click里错误地用了{{$index}}，比如写成了：

<button ng-click="deleteItem({{$index}})">删除</button>

这会直接触发语法错误——因为ng-click的属性值是表达式，Angular会把整个deleteItem({{$index}})当成表达式解析，而{{}}在表达式里是非法语法。

正确写法：直接在表达式里使用$index变量即可：

<button ng-click="deleteItem($index)">删除第{{$index}}项</button>

（2）DIV的id属性里的$index无法替换 #

原生HTML的id属性不会自动解析{{$index}}，你直接写id="item-{{$index}}"的话，浏览器会把item-{{$index}}当成字面量id，不会解析成item-0、item-1这类实际值。

正确写法：使用Angular提供的ng-attr-*语法来绑定原生属性，它会自动解析插值表达式：

<div ng-attr-id="item-container-{{$index}}">...</div>

（3）为什么track by $index没用？ #

track by $index是用来解决ng-repeat遇到重复数据时的报错问题，和$index在属性里的解析逻辑完全无关，所以用它当然解决不了你的问题啦。

完整示例代码 #

给你一个能正常运行的完整片段参考：

<div ng-repeat="item in myItems">
  <!-- 标签内容里的插值正常工作 -->
  <p>当前项索引：{{$index}}</p>
  
  <!-- ng-click直接用$index变量 -->
  <button ng-click="handleClick($index)">点击操作第{{$index}}项</button>
  
  <!-- 用ng-attr-id绑定原生id属性 -->
  <div ng-attr-id="item-box-{{$index}}" style="border:1px solid #ccc; margin:10px 0;">
    这是第{{$index}}个内容盒子
  </div>
</div>

内容的提问来源于stack exchange，提问作者Matt Robinson