Angular js - 每行编辑和保存多个输入答案

【问题标题】：Angular js - Multiple input per row edit & saveAngular js - 每行编辑和保存多个输入
【发布时间】：2017-03-04 09:25:29
【问题描述】：

<div ng-controller="MyController">
    <table border="1">
        <tr data-ng-repeat="item in items">
            <td data-ng-repeat="textValue in item.value">
               <input type="text" data-ng-model="textValue" data-ng-readonly="isReadonly" />
            </td>
        </tr>
    </table>
    <input type="button" value="Edit" data-ng-click="enableEdit();" />
</div>

将有多行，每行有多个输入类型的文本。最初将 onload 输入类型设置为只读。一旦用户按下编辑按钮，所有输入框都将变为可编辑状态。用户可以通过单击保存按钮更改文本框值并保存更新的值。

var MyModule = angular.module('MyModule', []);

  MyModule.controller("MyController", function($scope) {
    $scope.isReadonly = true;
    $scope.items = [{
      "id": 1,
      "value": {
        "value1": 10,
        "value2": 20,
        "value3": 30,
        "value4": 40
      }
    }, {
      "id": 2,
      "value": {
        "value1": 50,
        "value2": 60,
        "value3": 70,
        "value4": 80
      }
    }];

    $scope.enableEdit = function() {
      $scope.isReadonly = false;
    }

  });

点击下面的 plnkr 网址

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

【问题讨论】：

道歉，但我没有看到这里的问题？您的 plnkr 似乎没有工作？
我没有看到问题/问题？
是的，它有效。但是在点击保存时如何获取每行输入框的值以便保存数据。
啊！我明白了，请查看下面的答案部分以获取更多信息。
仅供参考：您不必明确保存数据，因为您已经为此使用了ng-model。

标签： angularjs

【解决方案1】：

您应该使用 ng-if 在控件之间切换，如下所示

<tr data-ng-repeat="item in items">
            <td data-ng-repeat="textValue in item.value">
              <label class="form-control" ng-if="isReadonly">{{textValue}} </label>
              <input type="text" ng-if="!isReadonly" data-ng-model="textValue" />
            </td>
          </tr>

控制器方法

 $scope.enableEdit = function() {
      $scope.isReadonly = false;
    }
    $scope.saveValues=function(){

       $scope.isReadonly = true;
    }

LIVE DEMO(UPDATED PLUNK)

【讨论】：

【解决方案2】：

我认为您面临的问题与未反映到模型的更改有关。之所以做出这样的假设，是因为您一开始没有告诉我们您的问题。

注意：为了完整起见，我还添加了 saveValues() 函数。
问题在于ngRepeat 指令的工作方式以及您如何使用它。 ng-repeat 为每个 textValue 创建一个子作用域，在这些子作用域中，ng-repeat 不会为 textValue 值创建 2-way 绑定。所以你的模型从未更新过。

有两种不同的方法可以解决这个问题：
P.S: Example#2 仅用于演示 object 技术，应避免用于您的用例，因为它会使 items 的数据结构进一步复杂化。

示例#1) 使用 (key, value) 喜欢：

  var MyModule = angular.module('MyModule', []);

  MyModule.controller("MyController", function($scope) {
    $scope.isReadonly = true;
    $scope.items = [{
      "id": 1,
      "value": {
        "value1": 10,
        "value2": 20,
        "value3": 30,
        "value4": 40
      }
    }, {
      "id": 2,
      "value": {
        "value1": 50,
        "value2": 60,
        "value3": 70,
        "value4": 80
      }
    }];

    $scope.enableEdit = function() {
      $scope.isReadonly = false;
    }
    $scope.saveValues = function() {
      $scope.isReadonly = true;
      console.log($scope.items)
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyModule">
<div ng-controller="MyController">
  <table border="1">
    <tr data-ng-repeat="item in items">
      <td data-ng-repeat="(key, textValue) in item.value">
        <input type="text" data-ng-model="item.value[key]" data-ng-readonly="isReadonly" />
      </td>
    </tr>
  </table>
  <input type="button" value="Edit" data-ng-click="enableEdit();" />
  <input type="button" value="Save" data-ng-click="saveValues();" />
</div>

示例#2) 使用objects 喜欢：

var MyModule = angular.module('MyModule', []);

MyModule.controller("MyController", function($scope) {
  $scope.isReadonly = true;
  $scope.items = [{
    "id": 1,
    "value": {
      "value1": {
        "value": 10
      },
      "value2": {
        "value": 20
      },
      "value3": {
        "value": 30
      },
      "value4": {
        "value": 40
      }
    }
  }, {
    "id": 2,
    "value": {
      "value1": {
        "value": 50
      },
      "value2": {
        "value": 60
      },
      "value3": {
        "value": 70
      },
      "value4": {
        "value": 80
      }
    }
  }];

  $scope.enableEdit = function() {
    $scope.isReadonly = false;
  }
  $scope.saveValues = function() {
    $scope.isReadonly = true;
    console.log($scope.items)
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyModule">
<div ng-controller="MyController">
  <table border="1">
    <tr data-ng-repeat="item in items">
      <td data-ng-repeat="textValue in item.value">
        <input type="text" data-ng-model="textValue.value" data-ng-readonly="isReadonly" />
      </td>
    </tr>
  </table>
  <input type="button" value="Edit" data-ng-click="enableEdit();" />
  <input type="button" value="Save" data-ng-click="saveValues();" />
</div>

【讨论】：