angularjs – ng-repeat中ng-click调用的赋值表达式的行为

前端之家收集整理的这篇文章主要介绍了angularjs – ng-repeat中ng-click调用的赋值表达式的行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用ng点击附加到< p>更新我的模型。

我在ng-repeat外部的赋值表达式没有问题,或者在ng-repeat中调用scope方法。但是,如果我在ng-repeat中使用赋值,它似乎被忽略。我没有看到在Firefox控制台中报告的任何消息,但没有尝试设置断点,以查看该事件是否被触发。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Test of ng-click</title>
  5. <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
  6. <script type='text/javascript'>//<![CDATA[
  7.  
  8. function MyCtrl($scope) {
  9. $scope.selected = "";
  10. $scope.defaultValue = "test";
  11. $scope.values = ["foo","bar","baz"];
  12.  
  13. $scope.doSelect = function(val) {
  14. $scope.selected = val;
  15. }
  16. }
  17. //]]>
  18.  
  19. </script>
  20. </head>
  21.  
  22. <body ng-app>
  23. <div ng-controller='MyCtrl'>
  24. <p>Selected = {{selected}}</p>
  25. <hr/>
  26. <p ng-click='selected = defaultValue'>Click me</p>
  27. <hr/>
  28. <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
  29. <hr/>
  30. <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
  31. </div>
  32. </body>
  33. </html>

小提琴是here,如果你喜欢(以及一些早期的变种)。

指令ngRepeat为每次迭代创建一个新的作用域,因此您需要在父作用域中引用您的变量。

使用$ parent.selected = value,如:

  1. <p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>

注意:函数调用由于原型继承而传播。

如果你想了解更多:The Nuances of Scope Prototypal Inheritance

猜你在找的Angularjs相关文章