代码之家 › 专栏 › 技术社区 › jjprz

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

ng-app ng-controller ng-repeat angularjs-scope angularjs

2

jjprz · 技术社区 · 10 年前

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

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

在我的HTML中,我有一个HTML dropdown 和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>

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

2 回复 | 直到 10 年前

1

3

dfsq 10 年前

将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

0

Darren Street 8 年前

上述解决方案可行,但如果您想在写入输入值后修改输入值,则会中断。在上例中,更改单词Nadal,选择也会更改,因为它们绑定到相同的值。

如果想修改输入的值,而不想绑定到同一个ngModel,可以对select使用ngchange,并将要在输入中显示的值传递给它。

在这个例子中,我在select。。。

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

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

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

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