Question

我正在尝试从项列表中创建可编辑输入列表。我希望用户能够编辑任何项目，但如果他们改变了，他们可以点击按钮并将其重置为原来的状态。

到目前为止，除了重置之外我还能正常工作。

我的HTML

<div ng-app ng-controller="TestController">
<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text" ng-click="copy(item)"/>
    <button ng-click="reset(item)">
    x
    </button>
</div>
{{list}}<br>
{{selected_item_backup}}
</div>

我的控制器

function TestController($scope) {

$scope.selected_item_backup = {};

$scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];

$scope.reset = function (item) {
    // i know this wont work for many reasons, it is just an example of what I would like to do
    item = $scope.selected_item_backup;
};

$scope.copy = function (item) {
    angular.copy(item, $scope.selected_item_backup);
};
}

这是一个小提琴 http://jsfiddle.net/ryanmc/1ab24o4t/1/

请记住，这是我的真实代码的简化版本。我的对象每个都有许多可编辑的字段。它们也没有编入索引，因此不能依赖索引。我只是希望能够将原始项目分配到新项目之上并将其替换。

Answer 1

这是工作解决方案jsfiddle

function TestController($scope) {

  $scope.list = [{
    value: 'value 1'
  }, {
    value: 'value 2'
  }, {
    value: 'value 3'
  }];
  var orgiinalList = [];
  angular.forEach($scope.list, function(item) {
    orgiinalList.push(angular.copy(item));
  });

  $scope.reset = function(index) {
    $scope.list[index] = angular.copy(orgiinalList[index]);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
  <div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text" />
    <button ng-click="reset($index)">
      x
    </button>
  </div>
  {{list}}
  <br>
</div>

Answer 2

您无法在较新版本的角度中使用全局功能作为控制器，但您可以在应用程序中注册控制器：

<div ng-app ng-controller="TestController">
    <div ng-repeat="item in list">
        <label>Input {{$index+1}}:</label>
        <input ng-model="item.value" type="text" ng-click="copy($index,item)"/>
        <button ng-click="reset($index,item)">
        x
        </button>
    </div>
    {{list}}<br>
    {{selected_item_backup}}

function TestController($scope) {
  $scope.selected_item_backup = [];   
  $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
  $scope.reset = function (index) {      
    $scope.list[index].value = $scope.selected_item_backup[index];
  };

  $scope.copy = function (index,item) {
    // backup the old value
    $scope.selected_item_backup[index] = item.value;
  };
}

Answer 3

更改重置功能，使其如下所示：

$scope.reset = function(index) {
    $scope.list[index].value = "value "+ (index+1); 
};

会使你的'重置'按钮恢复那些原始值......

角度控制器：

function TestController($scope) {

  $scope.selected_item_backup = {};

  $scope.list = [{
    value: 'value 1'
  }, {
    value: 'value 2'
  }, {
    value: 'value 3'
  }];

  $scope.reset = function(index) {
    $scope.list[index].value = "value " + (index+1);
  };

  $scope.copy = function(item) {
    angular.copy(item, $scope.selected_item_backup);
  };
}

HTML：

<div ng-app ng-controller="TestController">
  <div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text" ng-click="copy(item)" />
    <button ng-click="reset($index)">
      x
    </button>
  </div>
</div>

您的数组的值由这些输入直接建模 - 因此当用户键入对这些输入的更改时，他们直接操作$ scope.list数组，因此您无法真正将其用作参考...希望这是有道理的

在ng-repeat中从控制器重置ng-model

3 个答案: