Update value of an input text when an option is selected with angularjs

Question

I have my controller in angularjs with a array

app.controller('player', function($scope) {
    $scope.players = [
        {
            "id":3,
            "name":"Nadal",
        },
        {
            "id":4,
            "name":"Federer"
        }
    ]
});

In my HTML I have HTML with a dropdown and a textbox.

 <html ng-app="pdl">  
    <body ng-controller="player">  
        <input type="text" id="name" value=""/>
        <select name="id">  
            <option ng-repeat="player in players" value="{{player.id}}">{{player.id}}</option>  
        </select>  
    </body>  
 </html>

I want to update the input with a 'name' when I choose an option from the dropdown

Please be more specific, also add the HTML you have. – John Smith May 23 '16 at 21:15 — John Smith, May 23 '16 at 21:15

dfsq · Accepted Answer · 2016-05-23T21:55:19.107

3

Bind both select and input to the same ngModel:

angular.module('pdl', []).controller('player', function($scope) {
  $scope.players = [{
    "id": 3,
    "name": "Nadal",
  }, {
    "id": 4,
    "name": "Federer"
  }]
});

<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>

<div ng-app="pdl" ng-controller="player">
  <input type="text" ng-model="player.name" />
  <select ng-model="player" ng-options="player as player.name for player in players">
  </select>
</div>

And use ngOptions for selectbox.

edited May 23 '16 at 21:55

answered May 23 '16 at 21:43

dfsq

191,768
25
236
258

In the textbox should place the 'name' – jjprz May 23 '16 at 21:52

score 0 · Answer 2 · answered Feb 28 '18 at 17:53

The solution above works, but breaks if you want to amend the input value after its been written. In the example above change the word Nadal and the select is changed also as they are bound to the same value.

If want to amend the value of the input and you don't want to bind to the same ngModel, you could use ng-change on the select, and pass it the value you want to display in the input.

In this example I insert the "ng-change" statement on the select...

ng-change="change(model.action)"

and in the controller I update the scope for the input

    $scope.change = function (str) {
        $scope.model.action = str;
    };

Every time you update the select the input will update too, but you can amend the input value without touching the select as they are bound differently.

Update value of an input text when an option is selected with angularjs

2 Answers2