CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6397

How to bind a select box selection with a input field. AngularJS

I have a select box with a list of employees. When I select one I need the First & Last Name inserted in the input field. right now when i select one [object Object] appears in the input field.

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

Upvotes: 0

Views: 4460

Answers (3)

Edminsson
Edminsson

Reputation: 2506

If I understand you correctly you want to select the same string you display in the dropdown. If that is the case just change your select to 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>

Upvotes: 2

ryeballar
ryeballar

Reputation: 30098

You have to use another ng-model in your <input> type text instead of using the same model for the <select>. Use the ng-change() directive to detect changes of the <select> and then assign the input ng-model the appropriate values for the selected item.

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

Upvotes: 1

apairet
apairet

Reputation: 3172

The behaviour you observe is expected. The binding works normally. You are seeing [Object Object] in the input field because you 'link' an object to it. The input field displays your object by calling the toString method which return the string '[object object]'.

You have different options to solve your issue:

  1. Keep binding the input field to your Employee object and define a custom toString method for it
  2. Bind your input field to another model. To keep both model in-sync, you can use the ng-change directive on your select and update the model of the input field.

Here is a plunkr illustrating the first option: http://plnkr.co/edit/0xr67FhtXYP6FsVteVsv

The controller code looks like:

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

Upvotes: 1

Related Questions