2016-05-23 1 views
2

У меня есть контроллер в angularjs с массивомзначение Обновление ввода текста, когда выбран параметр с angularjs

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

В моем HTML У меня есть HTML с dropdown и 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> 

Я хочу обновить вход с «именем», когда я выбираю опцию из выпадающего списка

+0

Пожалуйста, будьте более конкретными, также добавьте HTML-код, который у вас есть. –

ответ

2

Bind и выберите и ввода в той же 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>

И используйте ngOptions для selectbox.

+0

В текстовом поле следует поместить «имя» – jjprz

+0

Также можно проверить обновленный код. – dfsq

0

Решение выше работает, но прерывается, если вы хотите изменить значение ввода после его написания. В приведенном выше примере измените слово Nadal и выбор изменится также, поскольку они привязаны к одному и тому же значению.

Если вы хотите изменить значение ввода и не хотите связываться с тем же ngModel, вы можете использовать ng-change для выбора и передать ему значение, которое вы хотите отобразить на входе.

В этом примере я вставить заявление «нг-изменения» на выбор ...

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

и в контроллере я обновить область для ввода

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

Каждый раз, когда вы обновите выбор, который также будет обновлен, но вы можете изменить входное значение, не касаясь выбора, поскольку они связаны по-разному.

Смежные вопросы