2017-09-27 100 views
0

我做了一個表單,它使用Angular和web API從數據庫返回數據。清除輸入文本影響角度過濾器

表單裏面有一個角度過濾器。另一個Angular清除表單中的每個輸入文本, 問題是當我單擊按鈕時,我必須重新加載頁面才能獲取數據。

您是否有任何方法可以在不影響過濾器的情況下清除輸入文本並且不重新加載數據?或將數據保存在頁面上。

或如何製作清除輸入文字的功能。

<form > 
    <input type="checkbox" ng-model="Hide" />Hide **<input type="button" value="Clear" ng-click="Code='';Latin='';Local='';Nhd='';Ndw='';Num=''" />** <input type="submit" value="Save" ng-click="save()"/> 

    <fieldset> 
     <legend>Contract Type</legend> 
     <table> 
      <tr> 
       <td>Code</td> 
       <td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="Code.Staff_Type_Code"></td> 
      </tr> 
      <tr> 
       <td>Latin Description</td> 
       <td><input type="text" size="35" ng-model="Latin.L_Desc"></td> 
      </tr> 
      <tr> 
       <td>Local Description</td> 
       <td><input type="text" size="35" ng-model="Local.A_Desc"></td> 
      </tr> 
      <tr> 
       <td>No. Of Houres Per Day</td> 
       <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="Nhd"></td> 
      </tr> 
      <tr> 
       <td>No. Of Days Per Week(s)</td> 
       <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="Ndw"></td> 
      </tr> 
      <tr> 
       <td>End Of Contract By</td> 
       <td> 
        <select> 
         <option ng-model="Age">Age</option> 
         <option ng-model="NYears">Number Of Years in Service</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td>Number</td> 
       <td> 
        <input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="Num"> 
        <select> 
         <option ng-model="Months">Months</option> 
         <option ng-model="Years">Years</option> 
        </select> 
       </td> 
      </tr> 

     </table> 
    </fieldset> 

    <br /> 

    <table border="1" ng-hide="Hide"> 
     <thead> 
      <tr> 
       <th>Code</th> 
       <th>Latin Description</th> 
       <th>Local Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local track by $index"> 

       <td>{{c.Staff_Type_Code}}</td> 
       <td>{{c.L_Desc}}</td> 
       <td>{{c.A_Desc}}</td> 
       <td><input type="button" value="Edit" /> </td> 
      </tr> 
     </tbody> 
    </table> 

</form>[enter image description here][1] 

回答

0

爲了達到特定表單字段復位: -

步驟1: - 具備上單擊它resetForm()被觸發

<button ng-click="resetForm()">Reset Input Texts</button> 

步驟2的鏈接/按鈕: - 在你的控制器中,定義resetForm()方法

$scope.resetForm = function() { 
    $scope.Code={}; 
    $scope.Latin ={}; 
    //Add all those fields which you want to reset 
    }; 

乾杯!

+0

它的工作原理非常感謝 – Hassan

+0

但是裏面有三個輸入文本[object Object],如何刪除它kindar – Hassan

+0

如果你想單獨刪除它們,而不是完整的對象,那麼你可以使用$ scope.Code .Staff_Type_Code = null; –