更改选项不会在 AngularJS 中显示选项标签/文本

Question

我有一个选择下拉菜单，我用一组对象填充它。我还为其分配了一个默认值，以便默认选择特定选项。当我将选项更改为其他内容时，选项值会更改（您可以在 pre 标记中看到这一点），但选项标签/文本显示为空白。如果我现在尝试选择其他选项，它会选择该选项并正确填充它的标签/文本。

问题：

所以在页面加载后，当我将选择选项更改为不同的值时，标签/文本不会填充。如何解决这个问题，以便正确显示适当的标签？

这是我所有的代码：

 angular.module('myApp', [])
   .controller('TodoCtrl', TodoCtrl);

 function TodoCtrl($scope, $window) {
   $scope.fieldObj = {};
   $scope.allMembers = [{
     "member_id": "1",
     "firstname": "a"
   }, {
     "member_id": "2",
     "firstname": "b"
   }, {
     "member_id": "3",
     "firstname": "c"
   }, {
     "member_id": "4",
     "firstname": "d"
   }, {
     "member_id": "5",
     "firstname": "e"
   }, {
     "member_id": "6",
     "firstname": "f"
   }];

   $scope.allMembers.unshift({
     member_id: "new",
     firstname: "Add New"
   });
   $scope.fieldObj.firstName = {};
   $scope.fieldObj.firstName = {
     "member_id": "3",
     "firstname": "c"
   };
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js" rel="script"></script>
<div ng-app="myApp" class="container">
  <h2>Todo</h2>

  <div ng-controller="TodoCtrl">

    <select ng-model="fieldObj.firstName" ng-options="member.member_id as member.firstname for member in allMembers track by member.member_id">
      <option value=""></option>
    </select>

    <pre>
            {{fieldObj.firstName | json}}
            {{message}}
        </pre>

    <div ng-if="fieldObj.firstName === 'new'">New option was selected</div>

  </div>
</div>

Answer 1

我认为这个问题是由于在同一个元素中同时使用了 select 和 track 表达式；您可以通过从 ng-options 的选择部分中删除“.memberId”来修复它，即：

<select ng-model="fieldObj.firstName" ng-options="member as member.firstname for member in allMembers track by member.member_id">

以this codepen 为例；我还稍微更改了您的一些代码，例如您将对象分配给 fieldObj.firstName 而不是 fieldObj 本身的最后一行。

查看https://docs.angularjs.org/api/ng/directive/ngOptions 的“选择为”部分，它更深入地解释了该问题。

Answer 2

这个 plunkr 解决了你的问题： https://plnkr.co/edit/wij2MyHpgKVQndx4pawB?p=preview

问题是，您将选择的 ng-model 设置为 fieldObj.firstName，同时使用成员对象的模式设置默认值。

尝试直接使用 fieldObj 作为 ng-model 并通过 ng-init 预选：

 <select ng-init="fieldObj=allMembers[3]"  ng-model="fieldObj" ng-options="member as member.firstname for member in allMembers track by member.member_id">
      <option value=""></option>
 </select>

此外，您需要使用区分大小写的变量和属性名称：在 JSON 中名是小写，在模板中是驼峰式。

相关：How to make a preselection for a select list generated by AngularJS?

Answer 3

您将 fieldObj.firstName 分配给包含 firstName 和 memberId 的对象，但我假设您尝试分配整个对象，而不是其中的一个字段（firstName）。

尝试简化您的 ngOptions，一切都会正常：

angular.module('myApp', [])
   .controller('TodoCtrl', TodoCtrl);

 function TodoCtrl($scope, $window) {
   $scope.fieldObj = {};
   $scope.allMembers = [{
     "member_id": "1",
     "firstname": "a"
   }, {
     "member_id": "2",
     "firstname": "b"
   }, {
     "member_id": "3",
     "firstname": "c"
   }, {
     "member_id": "4",
     "firstname": "d"
   }, {
     "member_id": "5",
     "firstname": "e"
   }, {
     "member_id": "6",
     "firstname": "f"
   }];

   $scope.allMembers.unshift({
     member_id: "new",
     firstname: "Add New"
   });
   $scope.fieldObj = $scope.allMembers[2];
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js" rel="script"></script>
<div ng-app="myApp" class="container">
  <h2>Todo</h2>

  <div ng-controller="TodoCtrl">

    <select ng-model="fieldObj" ng-options="member.firstname for member in allMembers track by member.member_id">
      <option value=""></option>
    </select>

    <pre>
            {{fieldObj.firstName | json}}
            {{message}}
        </pre>

    <div ng-if="fieldObj.firstName === 'new'">New option was selected</div>

  </div>
</div>