Update-Wert eines Eingangstextes, wenn eine Option mit AngularJS ausgewählt

Ich habe meinen Controller in AngularJS mit einem ArrayUpdate-Wert eines Eingangstextes, wenn eine Option mit AngularJS ausgewählt

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

In meinem HTML Ich habe HTML mit einem dropdown und einem 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>

Ich möchte den Eingang mit einem 'name' aktualisieren, wenn ich eine Option aus dem

Dropdown wählen

Quelle

2016-05-23 jjprz

Bitte seien Sie spezifischer, fügen Sie auch die HTML, die Sie haben. –

Bind beide wählen und Eingabe in die gleiche 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>

Und verwenden Sie ngOptions für Selectbox.

Quelle

2016-05-23 21:43:19 dfsq

Im Textfeld sollte der 'Name' – jjprz

auch möglich, überprüfen Sie den aktualisierten Code. – dfsq

Die obige Lösung funktioniert, bricht jedoch, wenn Sie den Eingabewert nach dem Schreiben ändern möchten. Im obigen Beispiel ändern Sie das Wort Nadal und die Auswahl wird ebenfalls geändert, da sie an den gleichen Wert gebunden sind.

Wenn Sie den Wert der Eingabe ändern möchten und nicht an dasselbe ngModel binden möchten, können Sie ng-change für die Auswahl verwenden und den Wert übergeben, der in der Eingabe angezeigt werden soll.

In diesem Beispiel habe ich die "ng-change" Erklärung über die Auswahl einfügen ...

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

und in der Steuerung ich den Bereich für die Eingabe aktualisieren Sie

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

Jedes Mal, Aktualisieren Sie die Auswahl, die Eingabe wird ebenfalls aktualisiert, aber Sie können den Eingabewert ändern, ohne die Auswahl zu berühren, da sie anders gebunden sind.

Quelle

2018-02-28 17:53:45

Update-Wert eines Eingangstextes, wenn eine Option mit AngularJS ausgewählt

Antwort

Verwandte Themen