21

我在这里创建了一个小提琴：http: //jsfiddle.net/nicktest2222/W4VaA/

我只是希望能够点击重置按钮并将我的原始值放回原处。有谁知道这样做的最佳方法？

提前致谢

function TodoCtrl($scope) {
  $scope.data = [
   {text:'learn angular', done:true},
   {text:'build an angular app', done:false}];

  $scope.orig = [$scope.data];

  $scope.reset = function() {
    $scope.data = $scope.orig;
  };

}
4

4 回答 4

48

问题在于 JS 克隆机制。您需要做的就是创建模型的深层副本：

function TodoCtrl($scope) {
    $scope.data = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}
    ];

    $scope.orig = angular.copy($scope.data);

    $scope.reset = function() {
        $scope.data = angular.copy($scope.orig);
    };
}

这是更新的小提琴。

于 2013-07-09T22:33:45.737 回答
14

最简单的选择是使用angular.copy克隆原始数据，然后再次重置$scope.

function TodoCtrl($scope) {
  $scope.data = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];

  var originalData = angular.copy($scope.data);
  $scope.reset = function() {
     angular.copy(originalData, $scope.data); 
  };
}

编辑：angular.copy当提供两个值时，将在将源值复制到其中之前清空目标对象或数组。这在处理子作用域时非常有用。

于 2013-07-09T22:31:19.790 回答
7

madhead 最初工作，但之后数据指向 $scope.orig 并且重置将不再工作。需要在重置中复制一份才能正常工作。

编辑疯子的作品：http: //jsfiddle.net/W4VaA/2/

function TodoCtrl($scope) {
  $scope.data = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];

  $scope.orig = angular.copy($scope.data);

  $scope.reset = function() {
     $scope.data = angular.copy($scope.orig);
  };
}
于 2013-08-22T16:36:11.620 回答
0

感谢上帝提供新的角度版本。但对于像我这样的人来说，仍然需要维护旧的 Angular js 代码，你必须编写一些像这样的小狗代码。

$scope.[moduleName] = { [variableName]: '' };

$scope.[formName].[variableName].$touched = false;
$scope.[formName].[variableName].$$untouched= false;

您还可以编写一个函数来处理大量这样的输入元素。但它使用 jquery 和 bootstrap 3

HTML

<ng-form class="form" name="formName" novalidate>
    <div class="row">
        <div class="col-md-6"">
            <div class="form-group">
                <label class="control-label">
                    input1 <span class="symbol required"></span>
                </label>
                <select id="input1" name="input1" class="form-control" required ng-model="model.input1">
                    <option value="">Select Optionn</option>
                    <option ng-repeat="option in options" value="{{option.id}}">{{option.Description}}</option>
                </select>
            </div>
        </div>
    </div>
</ng-form>

控制器.js

$scope.resetForm = function () {
    $scope.model = { input1: '' }; // reset form value
        let form = $(".form"),
            frmElm = $scope.formName; // referees to name="" for ng-form element

        form.find('.form-control').each(function (item) {
            let element = $(this),
            id = element.attr("id");

        if (frmElm[id]) {
            var scopeElement = frmElm[id];
            scopeElement.$touched = false;
            scopeElement.$untouched = false;
        }
    })
};
于 2021-08-17T21:37:08.180 回答