更改选项不会在 AngularJS 中显示选项 label/text

Question

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

问题：

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

这是我的全部代码：

 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 的 select 部分删除“.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 的 "select as" 部分，其中更深入地解释了问题。

Answer 2

您正在将 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>

Answer 3

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

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

尝试直接将 fieldObj 用作 ng-model 并通过 ng-init 预先select:

 <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?

更改选项不会在 AngularJS 中显示选项 label/text

Changing option does not show the option label/text in AngularJS

select

angularjs

ng-options

dropdown