在ng-repeat中由ng-click调用的赋值expression式的行为

我试图用ng-click来更新我的模型,附加到<p>

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

 <!DOCTYPE html> <html> <head> <title>Test of ng-click</title> <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script> <script type='text/javascript'>//<![CDATA[ function MyCtrl($scope) { $scope.selected = ""; $scope.defaultValue = "test"; $scope.values = ["foo", "bar", "baz"]; $scope.doSelect = function(val) { $scope.selected = val; } } //]]> </script> </head> <body ng-app> <div ng-controller='MyCtrl'> <p>Selected = {{selected}}</p> <hr/> <p ng-click='selected = defaultValue'>Click me</p> <hr/> <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p> <hr/> <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p> </div> </body> </html> 

小提琴在这里 ,如果你喜欢(以及几个早期的变种)。

2 Solutions collect form web for “在ng-repeat中由ng-click调用的赋值expression式的行为”

指令ngRepeat为每个迭代创build一个新的作用域,所以你需要在父作用域中引用你的variables。

使用$parent.selected = value ,如下所示:

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

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

如果你想了解更多: 范围原型inheritance的细微差别 。

正如@Stewie所说的,$家长是解决这个问题的一种方法。 然而,推荐的( 由Angular团队 )解决scheme是不在$ scope上定义原始属性。 $ scope应该引用你的模型。 使用引用也可以避免这个问题(因为原始属性不会在隐藏/隐藏相同名称的父范围属性的子范围上创build),并且您不必记住何时使用$ parent:

HTML:

 <p>Selected = {{model.selected}}</p> <hr/> <p ng-click='model.selected = defaultValue'>Click me</p> <hr/> <p ng-repeat='value in values' ng-click='model.selected = value'>{{value}}</p> <hr/> <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p> 

JavaScript的:

 $scope.model = { selected: ""}; ... $scope.doSelect = function (val) { $scope.model.selected = val; } 

小提琴 。

我最近更新了@Stewie提到的维基页面,总是推荐这种方法。

  • 使用Controller As方法访问inheritance范围
  • 如何将控制器注入到AngularJS的另一个控制器中
  • 将当前范围传递给AngularJS服务
  • selectng选项更改时获取值
  • 为什么使用if(!$ scope。$$阶段)$ scope。$ apply()是一个反模式?
  • AngularJS:当值大于时,ng-repeatfilter
  • Angularjs:'controller as syntax'和$ watch
  • $ scope。$ root和$ rootScope有什么区别?