Leeren Sie den Platzhalter, wenn Sie ng-model verwenden

Ich möchte eine text input Verknüpfung mit einer Variablen im Scope erstellen. Aber ich will das placeholder nichts anzeigen. Der Inhalt dieser Variablen im Bereich wird jedoch weiterhin angezeigt. Warum?Leeren Sie den Platzhalter, wenn Sie ng-model verwenden

var app = angular.module('example', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.hello = 'hello'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="example" ng-controller="MainCtrl"> 
 
    <input type="text" ng-model="hello" placeholder=""> 
 
</body>

Quelle

2016-03-29 panagulis72

Winkelstellen '$ scope.hello' in den' ' Elementwert, nichts mit dem Platzhalter zu tun. Könnten Sie bitte genauer sein? – Wtower

Ich habe eine Variable im Bereich und möchte sie bearbeiten. In diesem Fall würde ich gerne "hallo" in "hello123456" mit dem Eingabetext ändern können. – panagulis72

Entschuldigung, noch einmal völlig unklar, warum Sie nicht in der Lage sind, es zu tun. – Wtower

Sie eine Variable im Umfang haben, genannt hello. Sie haben ein <input> Element, das an dieselbe Variable gebunden ist. Das Element wird zwangsläufig denselben Wert dieser Variable haben.

Wie ich aus Ihren Kommentaren verstehe, möchten Sie, dass das Eingabeelement nicht an diese Variable gebunden ist. In diesem Fall gibt es mehrere Alternativen. Eine besteht zum Beispiel darin, eine separate Variable in Ihrem Bereich zu haben.

Dann können Sie ngChange verwenden, um die erste Variable nur zu aktualisieren, wenn die Eingabe geändert wird, und somit den Anfangswert davon beizubehalten.

var app = angular.module('example', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.hello = 'hello'; 
 
    $scope.field = ''; 
 
    $scope.change = function() { 
 
    $scope.hello = $scope.field; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="example" ng-controller="MainCtrl"> 
 
    <input type="text" ng-model="hello" ng-change="change()"> 
 
</body>

Quelle

2016-03-29 09:42:44 Wtower

Vielen Dank! – panagulis72

Da Sie den Wert Ihres Eingabefeld auf die Variable ‚Hallo‘ zu binden, die auf Ihrem Umfang vorhanden ist, die auch den Wert ‚Hallo‘ hat. Der Platzhalter hat damit nichts zu tun, der angezeigte Text ist der Wert des Eingabefeldes. Um das Eingabefeld zu löschen, setzen Sie Ihre Bereichsvariable auf eine leere Zeichenfolge.

Quelle

2016-03-29 08:54:07 fikkatra

-1

Setzen Sie $scope.hello = '' oder nicht einmal initialisieren, wird es durch Eingabe Tag initialisieren, können Sie direkt verwenden.

var app = angular.module('example', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.hello = ''; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="example" ng-controller="MainCtrl"> 
 
    <input type="text" ng-model="hello" placeholder=""> 
 
</body>

Quelle

2016-03-29 08:56:41 mkkhedawat

Aber was ist, wenn $ scope.hello bereits einen Wert hat, bevor Sie die App öffnen? – panagulis72

Welchen Wert Sie auch auf $ scope.hello setzen, wird dort angezeigt. Wenn Sie nicht angezeigt werden möchten, setzen Sie $ scope.hello auf leer. – mkkhedawat

Das ist meine Frage, wenn es eine Möglichkeit gibt, den Eingabetyp zu löschen, ohne set $ scope.hello auf leer zu setzen – panagulis72

Verwenden ngAttr detailliert auf https://docs.angularjs.org/guide/interpolation

<input type="text" ng-model="inputText" ng-attr-placeholder="{{somePlaceholder}}" />

Ausgabe: https://github.com/angular/angular.js/issues/5025

Basierend auf this post.

Quelle

2017-08-16 06:23:23 AechoLiu

Leeren Sie den Platzhalter, wenn Sie ng-model verwenden

Antwort

Verwandte Themen