2016-11-12 35 views
0

像文本輸入框,選擇不被清除上提交

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=''清除它們。
當我在不刷新頁面的情況下再次打開表單時,這些字段以紅色突出顯示。
假設表單就像添加用戶表單一樣。當我點擊第一位用戶的提交併重新打開表單再添加另一個用戶。當我重新打開表格時 - 它會突出顯示該字段。我知道它是因爲該字段是根據需要提及的,因此會出現此錯誤。我應該如何清除它們並確保當我重新打開表單時該字段沒有突出顯示?請幫幫我。

回答

0

嘗試給$ scope.modelname = {}; 或者你可以嘗試這種方式,作用域。$$ nextSibling.modelname ='';如果這有幫助

+0

不,它不工作。 {}將[對象對象]設置爲該字段,nextSibling - 與問題行爲相同。它清除值,但fidl在表單重新打開時突出顯示 –

+0

如果可能的話,你可以在jsfiddle或plunker中運行你的代碼並在此處給出鏈接..這將很容易幫助 –

+0

我是這個小提琴的新手..請原諒。我已經將示例代碼添加到原始帖子中。請讓我知道 –