像文本输入框,选择不被清除上提交

问题描述:

像文本输入框,选择不被清除上提交

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>

输入字段,如文本框,选择不被清除上提交。这些字段由ng-model引用,并在代码中用作$scope.modelname。当我点击提交 - 我用$scope.modelname=''清除它们。
当我在不刷新页面的情况下再次打开表单时,这些字段以红色突出显示。
假设表单就像添加用户表单一样。当我点击第一位用户的提交并重新打开表单再添加另一个用户。当我重新打开表格时 - 它会突出显示该字段。我知道它是因为该字段是根据需要提及的,因此会出现此错误。我应该如何清除它们并确保当我重新打开表单时该字段没有突出显示?请帮帮我。

尝试给$ scope.modelname = {}; 或者你可以尝试这种方式,作用域。$$ nextSibling.modelname ='';如果这有帮助

+0

不,它不工作。 {}将[对象对象]设置为该字段,nextSibling - 与问题行为相同。它清除值,但fidl在表单重新打开时突出显示 –

+0

如果可能的话,你可以在jsfiddle或plunker中运行你的代码并在此处给出链接..这将很容易帮助 –

+0

我是这个小提琴的新手..请原谅。我已经将示例代码添加到原始帖子中。请让我知道 –