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>

また、selectbox には ngOptions を使用します。

于 2016-05-23T21:43:19.823 に答える
0

上記の解決策は機能しますが、書き込まれた後に入力値を修正する場合は機能しません。上記の例では、単語 Nadal を変更すると、同じ値にバインドされているため、選択も変更されます。

入力の値を修正したいが、同じ ngModel にバインドしたくない場合は、select で ng-change を使用し、入力に表示する値を渡すことができます。

この例では、選択に「ng-change」ステートメントを挿入します...

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

そしてコントローラーで、入力のスコープを更新します

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

選択を更新するたびに入力も更新されますが、バインドが異なるため、選択に触れずに入力値を修正できます。

于 2018-02-28T17:53:45.487 に答える