代码之家 › 专栏 › 技术社区 › Devner

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

dropdown ng-options select angularjs

Devner · 技术社区 · 10 年前

我有一个select下拉列表,我用一个对象数组填充它。我还为它指定了一个默认值,以便在默认情况下选择一个特定的选项。当我将选项更改为其他选项时,选项值会更改(您可以在前标记中看到),但选项标签/文本显示为空白。如果我现在尝试选择其他选项,它会选择选项&也会正确填充它的标签/文本。

问题:

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

这是我所有的代码:

 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>

3 回复 | 直到 10 年前

Dan Belsey 10 年前

我认为这个问题是由于在同一个元素中同时使用select和track表达式引起的;您可以通过从ng选项的选择部分中删除“.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 ,更深入地解释了这个问题。

Community Mohan Dere 9 年前

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

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

尝试直接使用fieldObj作为ng模型,并通过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中是小写的,但在模板中是驼峰大小写。

Hristo Georgiev 10 年前

您正在分配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>