在 Angular js 中选择 ng-options 问题答案

【问题标题】：select ng-options issue in angular js在 Angular js 中选择 ng-options 问题
【发布时间】：2014-07-16 13:24:14
【问题描述】：

我正在尝试使用“选择”ng-options 功能选择团队的领导者。

学生对象：

student{
name:String,
status : String
}

我选择组长的代码如下。

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
    <option value="">Select leader</option>
    <option value="class.team.leader">{{class.team.leader.name}}</option>
</select>

“选择”将值正确存储到适当的模型值中。但是，当我进入页面视图时，选择没有正确显示模型值。但是这段代码可以很好地保存细节。

要求：

如果模型没有值，则默认显示 option value="" ==> 'Select leader'。否则，它应该显示“class.team.student.name”

请有人告诉我哪里出错了。谢谢。

【问题讨论】：

你能贴出你的代码吗

标签： angularjs angularjs-ng-repeat

【解决方案1】：

HTML：

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
    <option ng-show="!weHaveALeader" value="">Select leader</option>
    <option ng-show="weHaveALeader" value="class.team.leader">{{class.team.leader.name}}</option>
</select>

JS：

$scope.weHaveALeader = false;
$scope.$watch('class.team.leader', function(new, old) {
    $scope.weHaveALeader = true
}

【讨论】：

我同意这个想法。但我为什么要去看呢？ ng-model 默认会反映更改对吗？我想要的只是参考 plunker plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview，如果我选择 Bob 并保存对象 class.team.leader。然后，如果我回到我的页面，我应该能够看到选择的值“Bob”。显然我无法在 plunker 中说明它，因为我无法连接到 db。但是在我的项目中，当我重新加载页面时，它再次显示“选择领导者”而不是“鲍勃”。但值存在于范围对象中。
同样在选择时，它会立即变为“Bob”。但是重新加载显示“选择领导者”就是问题所在。我想您已经建议我“监视”以立即更改选择选项。这是我的默认设置。
除了控制器范围之外，您将选择“Bob”作为团队负责人的选项在哪里？ @sabari
@sabari 有什么进展吗？
我已经编辑了我的新代码并且显示正常。问题是'ref'类型的模型对象，我需要分配对象ID而不是整个对象。并且参考您对 'watch' 的建议，是否只建议使用 watch 功能而不是 watch 对象？参考：stackoverflow.com/questions/17838745/…

【解决方案2】：

您可以删除第二个选项标签，这似乎没有必要。

我已将您的代码放入 plunker http://plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview，它似乎工作正常。

<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
  <option value="">Select leader</option>
</select>
<div><b>Team Leader:</b> {{class.team.leader}}</div>

如果这不是您想要的，请详细说明缺少的内容。

【讨论】：

嗨，正如我之前在帖子中所说，我能够存储模型值。假设如果我选择 bob，在保存 class.team.leader 对象后，当我重新加载整个页面时，我希望“选择”默认提示为“鲍勃”。但它再次显示“选择领导者”。我希望不能在 plunker 中显示。因为这需要 db 链接。
我已经更新了 plunker 以在控制器中定义一个初始 $scope.class.team.leader 值，它可以正确反映到视图中。我认为问题可能出在其他地方。您介意将代码发布在您从 db 检索值并分配给 $scope.class.team.leader 的位置吗？
我猜您在将值从 db 分配给 $scope.class.team.leader 后可能不会调用 $scope.$apply()。

【解决方案3】：

select ng-model的正确使用方法如下。

选择领导 {{class.team.leader.name}}

这已经解决了页面重新加载时显示的问题。

【讨论】：