AngularJS input nicht aktualisieren mit ng-model

Ich habe ein Formular mit drei Eingabefeldern:

<form name="myForm" novalidate ng-controller="MainController as vm">
    <div>
        <input type="text" ng-model="vm.id" name="idInput" required>
        <input type="email" ng-model="vm.email" name="emailInput" required>
        <input type="text" ng-model="vm.output" name="output">
    </div>
</form>

vm.output ist eine variable definiert, die in meinem controller, der enthält einige strings plus vm.id und vm.email:

vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email;

Ich möchte zum erzeugen eines Ausgangs-URL, basierend auf die Eingabe des Benutzers in die id und E-Mail-Felder. Jedoch, die Ausgabe-Feld wird nicht aktualisiert, wenn ich eine Eingabe in die beiden anderen Felder. Es sagt nur myurl.com?id=undefined&email=undefined,

Ich kann es arbeiten, wenn ich

ng-value="'myurl.com?id=' + vm.id + '&email=' + vm.email"

Allerdings bin ich mit ng-clip die bekommt Sie die zu kopierenden Inhalte, indem Sie mit ng-model, also muss ich das nutzen.

Auch, hier mein controller:

angular
    .module("app")
    .controller("MainController",[MainController);

function MainController(){
    var vm = this;

    vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email;
}

Irgendwelche Vorschläge?

Haben Sie versucht, die syntax mit {{ und }}? vm.Ausgabe = "myurl.com?id=" + {{vm.id}} + "&email=" + {{vm.E-Mail}};`
Verwenden Sie die controller-as-syntax ist irgendwo in deinem code ?
Bearbeitet meine Frage ein wenig. Ich benutze MainController as vm statt $scope

InformationsquelleAutor Schileru | 2015-07-17

  1. 1

    Sie können dies erreichen, gibt es verschiedene Möglichkeiten. Eine Möglichkeit ist das einrichten ng-change Veranstaltungen an jedem der Eingänge, die Sie sehen wollen:

    <div>
    <input type="text" ng-model="vm.id" ng-change="updateOutput()" name="idInput" required />
    <input type="email" ng-model="vm.email" ng-change="updateOutput()" name="emailInput" required />
    <input type="text" ng-model="vm.output" name="output" />
</div>

    Dann bauen Sie die update Methode auf dem controller, Anwendungsbereich:

    app.controller = app.controller('MainController', function($scope) {

    $scope.vm = {
      output: '',
      email: '',
      id: ''
    };

    $scope.updateOutput = function() {
      $scope.vm.output = 'myurl.com?id=' + $scope.vm.id + '&email=' + $scope.vm.email;
    }
});

    Hier ist ein arbeiten plunker.

    InformationsquelleAutor Davin Tryon

  2. 0

    Ich würde mit benutzerdefinierten Richtlinie, die würden die Modell-Wert korrekt:

    app.directive('concatModel', function($parse) {

    var pattern = function(data) {
        return 'myurl.com?id=' + data.id + '&email=' + data.email;
    };

    return {
        require: 'ngModel',
        scope: {
            data: '=concatModel'
        },
        link: function(scope, element, attrs, controller) {
            scope.$watchCollection('data', function(newVal) {
                controller.$setViewValue(pattern(newVal));
                controller.$render();
            });
        }    
    };
});

    und verwenden Sie es wie diese:

    <div>
    <input type="text" ng-model="vm.id" name="idInput" required="" />
    <input type="email" ng-model="vm.email" name="emailInput" required="" />
    <input type="text" concat-model="{id: vm.id, email: vm.email}" ng-model="vm.output" name="output" />
</div>

    Demo: http://plnkr.co/edit/sFW16LLZK3TezNAvYk5F?p=info

    InformationsquelleAutor dfsq

Schreibe einen Kommentar