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

Question

我的控制器 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>

当我从下拉列表中选择一个选项时，我想用 'name' 更新输入

Answer 1

将 select 和输入绑定到同一个 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。

Answer 2

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

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

在此示例中，我在 select...

上插入了 "ng-change" 语句

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

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

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

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

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

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

angularjs

ng-repeat

angularjs-scope

ng-controller

ng-app