使用 angularjs 选择选项时更新输入文本的值答案

【问题标题】：Update value of an input text when an option is selected with angularjs使用 angularjs 选择选项时更新输入文本的值
【发布时间】：2018-03-01 01:53:45
【问题描述】：

我的控制器在 angularjs 中有一个数组

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

在我的 HTML 中，我有一个带有 dropdown 和 textbox 的 HTML。

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

当我从下拉列表中选择一个选项时，我想用“名称”更新输入

【问题讨论】：

请更具体，同时添加您拥有的 HTML。

标签： angularjs angularjs-scope ng-repeat ng-controller ng-app

【解决方案1】：

将 select 和 input 绑定到同一个 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 作为选择框。

【讨论】：

在文本框中应放置“名称”

【解决方案2】：

上述解决方案有效，但如果您想在写入后修改输入值，则会中断。在上面的示例中，更改单词 Nadal 并且 select 也会更改，因为它们绑定到相同的值。

如果想要修改输入的值并且不想绑定到同一个 ngModel，可以在 select 上使用 ng-change，并将想要在输入中显示的值传递给它。

在本例中，我在 select 上插入“ng-change”语句...

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

在控制器中我更新输入的范围

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

每次更新选择时，输入也会更新，但您可以修改输入值而无需触摸选择，因为它们的绑定方式不同。

【讨论】：