如何使用AngularJS將頁面設置恢復到默認設置

Question

我有一個html頁面，其中有幾個angularJS組件，其中包含多個設置。我計劃在下面實施一個取消按鈕，以便一旦用戶點擊按鈕，整個設置被清除並恢復到原始狀態。我在這裏使用Django框架。我如何使用angularJS來做到這一點？提前致謝。

以下是我的代碼：

HTML：

<table class="table"> 

     {% verbatim %} 

     <tr> 

      <td class="input-group" ng-repeat="(k,v) in alerts"> 

       <span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span> 
       <span ng-hide="v.hide"> 
       <input type="text" class="form-control" placeholder="Add Check here" ng-model="v.input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <b>Functional check</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="fc" ng-model="v.props">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <b>CFM issue</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="cfm" ng-model="v.props">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <b>Defect risk</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="{{ k }}" value="dr" ng-model="v.props"> 

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <a href="" ng-click="remove(v)"> 
     <span class="glyphicon glyphicon-trash"></span></a> 
        </span> 
        <!--<a href="" ng-click="remove(v)">remove</a></span></td> </tr>--> 
     {% endverbatim %} 
     <tr> 
      <td> 
       <button type="button" class='btn btn-info' ng-click="addAlert()"> 
        <span class="glyphicon glyphicon-plus"></span> 
        &nbsp;Add Check</button> 
      <button type="reset" ng-click="reset()" class="btn btn-danger"> 
       <span class="glyphicon glyphicon-repeat"></span> 
       &nbsp;Reset</button> 
     </td> 
     </tr> 
    </table> 
</div> 
<table class="table"> 
    <!--IMPORT FILE--> 

    <tr> 
     <td> 
      <div style="position:relative;"> 
       <a class='btn btn-primary' href='javascript:;'> 
        Choose File... 
        <input type="file" style='position:absolute;z-index:2;top:0;left:0; 
        filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
        opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'> 
       </a> 
       &nbsp; 
       <span class='label label-info' id="upload-file-info"></span> 
       <button ng-click="uploadAttachFile()" class="btn btn-small btn-default" id="uploadfile" name="uploadfile"> 
        <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;Import File</button> 
      </div> 
     </td> 
    </tr> 

    <!--ADD COMMENTS--> 

    <tr> 
     <td> 
      Add Comments*<h4><input type="text" class="form-control" placeholder="Comments here"> 
     </h4> 

     </td> 
     <td> 
      Add xx<h4><input type="text" class="form-control" placeholder="Add xx here"> 
     </h4> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <button class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Update check DB</button> 
      <button class="btn btn-small btn-warning"><span class="glyphicon glyphicon-remove"></span>&nbsp;Cancel</button> 
     </td> 
</table> 

和我的JS：

{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http){ 

$scope.alerts = []; 

$scope.addAlert = function() { 
$scope.alerts.push({msg: 'Another alert!', props : 0, input : ""}); 
}; 

$scope.closeAlert = function(index) { 
$scope.alerts.splice(index, 1); 
}; 

$scope.reset = function() { 
angular.forEach($scope.alerts, function(v){ 
v.input = ""; 
v.props = 0; 
}); 
}; 

$scope.remove = function(v){ 
    v.hide = 1; 
    } 

$scope.reset(); 
}); 

Answer 1

我不知道我完全理解你的問題 - 但這裏是我的解釋：

你有一個取消按鈕。添加一個ng-click屬性，用於在各自的控制器中調用一個函數。在該函數中，只需初始化所有「設置」（應該是$ scope對象）。這應該完成你所描述的內容。