2

我有一个带有数组的angularjs控制器

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

在我的 HTML 中，我有带有 adropdown和 a 的HTML 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>

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

4

2 回答 2

3

将 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用于选择框。

于 2016-05-23T21:43:19.823 回答
0

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

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

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

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

并在控制器中更新输入范围

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

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

于 2018-02-28T17:53:45.487 回答