Question

我有一个包含员工列表的选择框。当我选择一个时，我需要First＆amp;姓氏插入输入字段。现在当我选择一个[对象]出现在输入字段中时。

<div class="input-group">
  <span class="input-group-addon">J. TESPM</span>
     <input style="width:150px" ng-model="currentItem.TESPM" class="form-control" type="text">

  <span class="input-group-addon">J. TESPM</span>
    <select class="form-control" ng-options="employee as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsPM : true}" ng-model="currentItem.TESPM">
       <option value="" disabled>Select</option>
    </select>
</div>

Answer 1

如果我理解正确您想要选择您在下拉列表中显示的相同字符串。如果是这种情况，只需将您的选择更改为此。

<select class="form-control" ng-options="employee.EmployeeFirstName + ' ' + employee.EmployeeLastName as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsPM : true}" ng-model="currentItem.TESPM">
   <option value="" disabled>Select</option>
</select>

Answer 2

您必须在ng-model类型文字中使用其他<input>，而不是对<select>使用相同的模型。使用ng-change()指令检测<select>的更改，然后为输入ng-model分配所选项目的相应值。

<强> DEMO

<强> HTML

  <body ng-controller="Ctrl">
    <input type="text" ng-model="currentEmployee" />
    <select ng-model="employee" 
      ng-options="(employee.firstName + ' ' + employee.lastName) for employee in employees" ng-change="change(employee)">
      <option value="">-- Select Employee</option>
    </select>
  </body>

<强> JAVASCRIPT

  .controller('Ctrl', function($scope) {
    $scope.employees = [{
      firstName: 'Ryan',
      lastName: 'Eballar'
    }, {
      firstName: 'Rez James',
      lastName: 'Eballar'
    }, {
      firstName: 'Hazel Charmagne',
      lastName: 'Niza'
    }];

    $scope.change = function(employee) {
      $scope.currentEmployee = employee.firstName + ' ' + employee.lastName;
    };
  });

Answer 3

您所观察到的行为是预料之中的。绑定正常工作。您在输入字段中看到[对象]，因为您将对象“链接”到它。输入字段通过调用返回字符串'[object object]'的toString方法显示您的对象。

您有不同的选择来解决您的问题：

继续将输入字段绑定到Employee对象并为其定义自定义toString方法
将输入字段绑定到另一个模型。要使两个模型保持同步，您可以在选择中使用ng-change指令并更新输入字段的模型。

这是一个说明第一个选项的plunkr： http://plnkr.co/edit/0xr67FhtXYP6FsVteVsv

控制器代码如下所示：

angular.module('myApp', [])
    .controller('ctrl', function ($scope) {
        $scope.employeeArray = [
            {
                EmployeeFirstName: 'James',
                EmployeeLastName: 'Bond'
            },
            {
                EmployeeFirstName: 'King',
                EmployeeLastName: 'Georges'
            }
        ];

        function Employee (fn, ln) {
            this.EmployeeFirstName = fn;
            this.EmployeeLastName = ln;
        }

        Employee.prototype.toString = function () {
            return this.EmployeeFirstName + ' ' + this.EmployeeLastName;
        };

        $scope.secondArray = [
            new Employee('James', 'Bond'),
            new Employee('King', 'Georges')
        ];
    });

如何将选择框选择与输入字段绑定。 AngularJS

3 个答案: