javascript - 如何使用 AngularJS 重置

Question

嗨，我有一个使用 bootstrap ui 的项目？(AngularJS)。我想实现一个重置功能来重置所有输入字段和单选按钮。我尝试在 JS 文件中添加新 Controller ，但失败了。以下是我的代码。 HTML部分:

 <div ng-controller="AlertDemoCtrl">

        <table class="table">

            {% verbatim %}

            <tr>
                <td class="input-group" ng-repeat="(k,v) in alerts">
                    <span class="input-group-addon">Check {{ k }}</span>
                    <input type="text" class="form-control" placeholder="Add Check here">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <b>functional check</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <b>CFM issue</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <b>Defect risk</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1">

                </td></tr>
            {% endverbatim %}
            <tr><td><button type="button" class='btn btn-info' ng-click="addAlert()">+Add Check</button>
                <button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button>
            </td></tr></table></div>

和我的 JS:

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

$scope.alerts = [];

$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};

$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};

$scope.reset();

});

有人可以建议我一种方法来实现它吗？提前致谢。

Answer 1

您可以进一步开发您的模型，以包含每个警报的属性列表:

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

将 View 与这些属性联系起来:

        <input type="text" class="form-control" placeholder="Add Check here" ng-model="v.input">
        <br/>
        <b>functional check</b>&nbsp;&nbsp;&nbsp;
        <input type="radio" value="fc" ng-model="v.props">
        <br/>
        <b>CFM issue</b>&nbsp;&nbsp;&nbsp;
        <input type="radio" value="cfm" ng-model="v.props">
        <br/>
        <b>Defect risk</b>&nbsp;&nbsp;&nbsp;
        <input type="radio" value="dr" ng-model="v.props">

然后在重置期间迭代每个警报的属性:

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

请引用我为您创建的这个插件:

http://plnkr.co/edit/JINIgCOTfD2c5dklldQc?p=preview

更新:

使用 ng-hide 属性隐藏元素。我更新了 plunkr