Javascript 如何使用AngularJS将页面设置恢复为默认设置

我有一个html页面，它有几个angularJS组件和几个设置。我计划在下面执行一个取消按钮，这样一旦用户点击按钮，整个设置就会被清除并恢复到原始状态。我在这里使用Django框架。我如何使用angularJS做到这一点？提前谢谢

以下是我的密码：

Html:

---

我不确定我是否完全理解你的问题，但以下是我的解释：

---

你有一个取消按钮。添加一个ng click属性，该属性调用各自控制器中的函数。在该函数中，只需初始化所有应为$scope对象的设置。这应该可以完成您所描述的内容。

您的描述有点模糊-您是否可以提供您已经拥有的代码，我们可以从中工作？您所说的组件是什么意思？设置？您可以有一个取消按钮，将所有范围模型设置为一些默认值，这也会更新您的视图。是的。实际上，这些设置可能分布在不同的作用域中，因此最好在单击“取消”按钮时使用$rootScope.$broadcast，以便所有相关的作用域都可以侦听它并执行其他操作。但这个问题现在太不清楚了，需要在我们真正回答之前加以澄清。还有，这件事让人感觉不舒服。我觉得它可以/应该设计得更模块化。我同意。根据项目OP的任务，您可以考虑阅读关于角度服务的文档，即“设置服务”。

    <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>

{{ 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();
});