AngularJS：如何通过ng-click将ng-repeat的值传入组件赋值？

嘿，我来帮你搞定这个问题！你遇到的其实是AngularJS指令表达式的常见误区——在ng-click这类指令的表达式里，完全不需要用双大括号{{}}来插值，因为ng-click本身就运行在Angular的作用域中，能直接访问当前循环里的x变量。

为啥原来的写法不对？ #

你写的vm.currentPhoneRichPresenceState = '{{x.text}}';会把{{x.text}}当成一个固定字符串赋值给变量，而不是取到x.text的实际值。双大括号是用来在模板里直接输出内容的，比如你在<li>里写{{x.text}}是对的，但在指令的表达式里用它就会出问题。

正确的写法应该是这样 #

把双大括号去掉，直接引用x.text就行：

<li md-prevent-menu-close 
    ng-repeat="x in vm.telephonyInfo.phone.phoneRichPresenceStateOptions" 
    ng-click="vm.currentPhoneRichPresenceState = x.text; vm.setPhoneRichPresenceState();"
>
    {{x.text}}
</li>

额外给你个优化小建议 #

如果你的setPhoneRichPresenceState方法本来就要用到这个状态值，不如直接把x.text作为参数传给方法，这样代码更整洁：

<li md-prevent-menu-close 
    ng-repeat="x in vm.telephonyInfo.phone.phoneRichPresenceStateOptions" 
    ng-click="vm.setPhoneRichPresenceState(x.text);"
>
    {{x.text}}
</li>

然后在控制器里修改方法：

vm.setPhoneRichPresenceState = function(selectedState) {
    vm.currentPhoneRichPresenceState = selectedState;
    // 这里写你的其他逻辑
};

这样模板更简洁，控制器的逻辑也更集中，后期维护起来更方便～

内容的提问来源于stack exchange，提问作者Peter Boomsma