Question

<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输入类型设置为readonly。用户按下编辑按钮后，所有输入框都将变为可编辑状态。用户可以更改文本框值和单击“保存”按钮保存更新的值。

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

Answer 1

我认为您遇到的问题与未反映回模型的更改有关。之所以做出这样的假设是因为你没有首先告诉我们你的问题。

注意：我还添加了saveValues()功能以确保完整性问题是由于ngRepeat指令的工作原理以及您如何使用它。 ng-repeat为每个textValue创建子范围，在这些子范围中，ng-repeat不会为textValue值创建双向绑定。所以你的模型永远不会更新。

有两种不同的方法可以解决这个问题：
P.S：示例＃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>

Answer 2

您应该使用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)

Angular js - 每行多个输入编辑＆amp;保存

2 个答案: