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

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

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

如果我理解正确，你想选择你在下拉菜单中显示的相同字符串。如果是这种情况，只需将select更改为this。

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

您观察到的行为是预期的。绑定正常。您在输入字段中看到[Object Object]是因为您将一个对象"链接"到它。输入字段通过调用toString方法来显示您的对象，该方法返回字符串'[object object]'。

你有不同的选择来解决你的问题:

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

下面是第一个选项的示例: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')
        ];
    });

您必须在<input>类型文本中使用另一个ng-model，而不是为<select>使用相同的模型。使用ng-change()指令来检测<select>的变化，然后为输入的ng-model指定所选项目的适当值。

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

相关内容

最新更新

热门标签：