Question

我有一个选择下拉列表，我用一组对象填充它。我还为它分配了一个默认值，以便默认选择一个特定的选项。当我将选项更改为其他选项时，选项值会更改（您可以在预标记中看到此选项），但选项标签/文本显示为空白。如果我现在尝试选择其他选项，则会选择选项＆amp;也正确填充它的标签/文字。

ISSUE：

因此，在页面加载后，当我将select选项更改为其他值时，标签/文本不会填充。如何解决这个问题，以便正确显示相应的标签？

这是我的所有代码：

＆＃13;

 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"
   };
 }

＆＃13;

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

＆＃13;

Answer 1

我认为这个问题是由同一个元素中的select和track表达式引起的;你可以通过删除＆＃34; .memberId＆＃34;来解决它。来自ng-options的选择部分，即：

data

看看this codepen的例子;我也略微更改了一些代码，例如您将对象分配给fieldObj.firstName而不是fieldObj本身的最后一行。

看看＆＃34;选择＆＃34; https://docs.angularjs.org/api/ng/directive/ngOptions部分，更深入地解释了这个问题。

Answer 2

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

问题是，在使用成员对象的模式设置默认值时，将select的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>

此外，您需要使用区分大小写的变量和属性名称：firstname在您的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>

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

3 个答案: