使用angular.js重置模型

一尘不染

使用angular.js重置模型

angularjs

我只是尝试重置这样的值：

$scope.initial = [
    {
        data1: 10,
        data2: 20
    }            
];


$scope.datas= $scope.initial;


$scope.reset = function(){
  $scope.datas = $scope.initial;  
}

但是它没有产生任何东西，有解决的主意吗？

angular.module('app', []).controller('MyCtrl', function($scope) {

  $scope.initial = [

    {

      data1: 10,

      data2: 20

    }

  ];



  $scope.datas= $scope.initial;



  $scope.reset = function(){

    $scope.datas = $scope.initial;

  }

});


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">

  <div ng-repeat="data in datas">

    <input type="text" ng-model="data.data1" />

    <input type="text" ng-model="data.data2" />

  </div>

  <a ng-click="reset()">Reset to initial value</a>

  or

  <button ng-click="name = initial">Reset to initial value</button>

  <hr />

  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>

</div>

jsfiddle上有一个工作示例

阅读 244

2020-07-04

共1个答案

一尘不染

这真的是关于JavaScript的问题（因此我添加了“ javascript”标记）。将JavaScript对象（例如$
scope.initial数组）分配给变量时，它是通过引用而不是副本来分配的。所以，这句话

$scope.datas= $scope.initial;

导致$ scope.datas指向$ scope.initial对象。对$ scope.datas或$
scope.initial所做的任何更改都会影响同一个（单个）对象。由于ng-
model用于数据绑定对象元素data1和data2，因此对文本输入的任何更改都会更改$ scope.datas引用的对象的data1和data2元素，即$
scope.initial。要查看实际效果，请将以下内容添加到小提琴的HTML中：

<p>{{initial}}</p>

当您在文本框中更改值时，您会看到$ scope.initial也正在更改。

@Max提供了部分答案：在reset函数中使用angular.copy（）。但是，您还必须在初始分配中使用angular.copy（）：

 $scope.datas = angular.copy($scope.initial);

更新：

正如@EpokK在他的回答中所示，另一种解决方案是

angular.copy($scope.initial, $scope.datas);

正如@bekite在回答中提到的那样，@ EpokK的解决方案不会创建另一个对象。

完整代码

angular.module('app', []).controller('MyCtrl', function($scope) {

  $scope.initial = [{

    data1: 10,

    data2: 20

  }];

  $scope.datas = angular.copy($scope.initial);

  $scope.reset = function () {

    $scope.datas = angular.copy($scope.initial);

    // or

    // angular.copy($scope.initial, $scope.datas);

  }

});


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="app" ng-controller="MyCtrl">

  <div ng-repeat="data in datas">

    <input type="text" ng-model="data.data1" />

    <input type="text" ng-model="data.data2" />

  </div>

  <a ng-click="reset()">Reset to initial value</a>

  or

  <hr />

  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}

</div>

[fiddle](http://jsfiddle.net/wgR5c/1)

2020-07-04