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属性，该属性调用各自控制器中的函数。在该功能中，只需初始化所有＆＃34;设置＆＃34; （应该是$ scope对象）。这应该完成你所描述的内容。

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

1 个答案: