【问题标题】:Get ng-model value from inside ng-repeat using ng-change使用 ng-change 从 ng-repeat 内部获取 ng-model 值
【发布时间】:2023-09-05 16:23:01
【问题描述】:

伙计们,我是 Angular 新手,在从 ng-repeat 内部获取 ng-model 的值时遇到问题。

我有一组用户,我想指定具有不同访问级别的用户

users = [
{id:1, level:0},
{id:2, level:0},
{id:3, level:0}
]

这是 HTML

<div ng-repeat="user in users track by $index">
{{user.id}}-
<select name="appoint" ng-change="appoint(user.id)" ng-model="appointLevel">
   <option value=0>Revoke</option>
   <option value=1>Moderator</option>
   <option value=2>Admin</option>
 </select>
</div>

angular 中的appoint() 函数:

$scope.appoint = function(id){
    console.log(id+' '+appointLevel)
  }

该函数工作正常,我得到了id 的值,但不是触发该函数的输入元素的“appointLevel”。

如何在 `ng-change' 上有效地获取值 console.log(id+' '+appointLevel)? 提前致谢。

【问题讨论】:

  • 你试过 $scope.appointLevel 吗?
  • 是的,它给了undefined
  • 尝试将 $scope.apppointLevel.value 放在 ng-model 和控制台中。请注意,点在可验证的角度范围内很重要。

标签: angularjs angularjs-ng-repeat angular-ngmodel


【解决方案1】:

使用

<select name="appoint" ng-change="appoint(user.id, appointLevel)" ng-model="appointLevel">

$scope.appoint = function(id, appointLevel) {
    console.log(id + ' ' + appointLevel);
}

您不能直接从 JS 函数中访问 AppendLevel,因为它在 ng-repeat 的范围内,它是控制器范围(即 $scope)的子范围。

Working plunker

或者您可以将指定级别存储在用户本身中:

<select name="appoint" ng-change="appoint(user)" ng-model="user.appointLevel">

$scope.appoint = function(user) {
    console.log(user.id + ' ' + user.appointLevel);
}

【讨论】:

  • 是的,我已经想通了,但是在不传递该论点的情况下,可以通过任何其他方式做到这一点。
  • 这是最简单的做法。您还可以将指定级别存储在用户本身中,并将用户作为参数传递给函数:plnkr.co/edit/NvD0H9KPRZNft9aqWoQ1?p=preview
  • 嗨@JBNizet,你能解释一下为什么 $scope.appointLevel 会导致 undefined 吗??
  • 因为 ng-repeat 有自己的作用域。因此,当您在选择框中选择一个选项时,angular 会设置 ngRepeat 的 scope.apppointLevel 的值。不是控制器的 scope.appointLevel 的值。
  • 谢谢,这几乎是我想要的,就是通过只传递用户参数来保持代码干净。您能否回答上述链接(plnkr.co),以便我可以将其标记为已接受。