2016-11-12 3 views
0

Eingabefelder wie Textbox, werden wählen gelöscht nicht auf

var app = angular.module('myapp', ['ngMaterial']); 
 
app.controller('nameController', ['$scope', function($scope) { 
 
    alert("controller called"); 
 
    $scope.addNewName = function() 
 
    { 
 
    $scope.showSection = true; 
 
    }; 
 

 
    $scope.submit = function() { 
 
    alert("Added"); 
 
    $scope.adduserform.aname = ""; 
 
    $scope.showSection = false; 
 
    } 
 

 
}]);
<html ng-app="myapp"> 
 
<head> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
</head> 
 
<body> 
 
<div layout="row" ng-controller="nameController"> 
 
    <div> 
 
    <md-button aria-label="add" type="button" class="md-primary md-raised" ng-click="addNewName()">Add New Name</md-button> 
 
    </div> 
 

 
    <!-- below section will be shown when on click on Add New Name button --> 
 
    <form ng-show="showSection" name="adduserform"> 
 
    <label>Enter Name: </label> 
 
    <md-input-container> 
 
     <input type="text" ng-model="adduserform.aname" aria-label="name" id="aname" required/> 
 
    </md-input-container> 
 
    <md-button type="button" aria-label="submit" class="md-primary md-raised" ng-click="submit()">Submit</md-button> 
 
    </form> 
 
</div> 
 
    <!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    
 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    
 
    
 
    
 
</body> 
 
</html>

Eingabefelder wie Text einreichen, wählen Sie werden anschließend auf nicht gelöscht. Die Felder werden von ng-model bezeichnet und im Code als $scope.modelname verwendet. Nachdem ich auf "Senden" geklickt habe, lösche ich sie mit $scope.modelname=''.
Wenn ich das Formular erneut öffne, ohne die Seite zu aktualisieren, werden die Felder rot hervorgehoben.
Angenommen, das Formular ist wie Benutzerformular hinzufügen. Wenn ich auf Senden für den ersten Benutzer klicke und das Formular erneut öffne, um einen weiteren Benutzer hinzuzufügen. Wenn ich das Formular erneut öffne, wird das Feld hervorgehoben. Ich weiß es, weil das Feld als erforderlich erwähnt wird und daher diesen Fehler macht. Wie sollte ich sie löschen und sicherstellen, dass das Feld nicht hervorgehoben wird, wenn ich das Formular erneut öffne? Bitte hilf mir.

Antwort

0

Versuchen Sie, $ scope.modelname = {}; Oder Sie können dies auf andere Weise versuchen, scope. $$ nextSibling.modelname = '';

Lassen Sie mich wissen, wenn dies oder nicht geholfen Arbeit

+0

Nein, es tut. {} setzt [Object Object] auf das Feld und nextSibling - verhält sich wie das Problem. Es löscht den Wert, aber fidl wird hervorgehoben, wenn das Formular wieder geöffnet wird –

+0

Wenn möglich, können Sie Ihren Code in jfiddle oder plunker laufen lassen und diesen Link hier geben..Es wird einfach zu helfen sein –

+0

Ich bin neu in dieser Fiddle .. Pls verzeihen . Ich habe dem ursprünglichen Beitrag einen Beispielcode hinzugefügt. Bitte lassen Sie mich wissen –

Verwandte Themen