9

我使用 ng-resource 从我的服务器获取数据，然后将数据放入表格网格中，如下所示：

<div ng-form name="grid">
      <button type="submit" data-ng-disabled="grid.$pristine">Save</button>
        <div class="no-margin">
            <table width="100%" cellspacing="0" class="form table">
                <thead class="table-header">
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                    </tr>
                </thead>
                <tbody class="grid">
                    <tr data-ng-repeat="row in grid.data">
                        <td>{{ row.contentId }}</td>
                        <td><input type="text" ng-model="row.title" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>

有没有一种方法可以使单击“提交”按钮通过网格检查已更改的行，然后putEntity(row)以该行作为参数调用函数？

4

4 回答 4

12

你可以通过几种方式做到这一点，记住每个 NgModelController 都有一个 $dirty 标志，可以用来检查输入是否发生了变化。但我想说最简单的方法就是这样做：

编辑为 HTML：

<input type="text" ng-model="row.title" ng-change="row.changed=true" />
<button ng-click="save()">Save</button>

在 JS 中：

$scope.save = function () {
    // iterate through the collection and call putEntity for changed rows
    var data = $scope.grid.data;
    for (var i = 0, len = data.length; i < len; i++) {
        if (data[i].changed) {
            putEntity(data[i]);
        }
    }
}
于 2013-07-18T08:55:27.060 回答
3

这是可行的方法。它是以第一个评论中的 JSFiddle 为基础构建的。

首先，我将data-ng-disabled属性更改为changes.length <= 0并添加$scope.changes = []到控制器中。

$scope.changes = [];

然后我添加了一个手表$scope.data

$scope.$watch('data', function(newVal, oldVal){
    for(var i = 0; i < oldVal.length; i++){
        if(!angular.equals(oldVal[i], newVal[i])){
            console.log('changed: ' + oldVal[i].name + ' to ' + newVal[i].name);

            var indexOfOld = $scope.indexOfExisting($scope.changes, 'contentId', newVal[i].contentId);

            if(indexOfOld >= 0){
                $scope.changes.splice(indexOfOld, 1);
            }

            $scope.changes.push(newVal[i]);
        }
    }
}, true); // true makes sure it's a deep watch on $scope.data

基本上这会遍历数组并使用angular.equals检查是否有任何变化。如果对象已更改，则检查它是否已存在$scope.changes。如果是，则将其删除。之后newVal[i]被推到$scope.changes

$scope.indexOfExisting取自这个SO question

$scope.indexOfExisting = function (array, attr, value) {
    for(var i = 0; i < array.length; i += 1) {
        if(array[i][attr] === value) {
            return i;
        }
    }
};

最后我把它变成了$scope.checkChange()这样

$scope.checkChange = function(){
    for(var i = 0; i < $scope.changes.length; i++){
        console.log($scope.changes[i].name);
        //putEntity($scope.changes[i])
    }
    $scope.changes = [];
};

这将使您能够仅提交更改的行。

于 2013-07-17T09:18:57.437 回答
2

我决定这样做：

这是我获取数据然后复制它的地方：

getContents: function ($scope, entityType, action, subjectId, contentTypeId, contentStatusId) {
    entityService.getContents(entityType, action, subjectId, contentTypeId, contentStatusId)
    .then(function (result) {
        $scope.grid.data = result;
        $scope.grid.backup = angular.copy(result);
        $scope.grid.newButtonEnabled = true;
    }, function (result) {
        alert("Error: No data returned");
        $scope.grid.newButtonEnabled = false;
    });
},

然后稍后在保存时，我使用 angular.equals 与备份进行比较：

$scope.saveData = function () {
   var data = $scope.grid.data;
            for (var i = 0, len = $scope.grid.data.length; i < len; i++) {
                if (!angular.equals($scope.grid.data[i], $scope.grid.backup[i])) {
                    var rowData = $scope.grid.data[i]
                    var idColumn = $scope.entityType.toLowerCase() + 'Id';
                    var entityId = rowData[idColumn];
                    entityService.putEntity($scope.entityType, entityId, $scope.grid.data[i])
                        .then(function (result) {
                            angular.copy(result, $scope.grid.data[i]);
                            angular.copy(result, $scope.grid.backup[i]);
                        }, function (result) {
                            alert("Error: " + result);
                        })
                }
            }
            $scope.grid.newButtonEnabled = true;
            $scope.grid.saveButtonEnabled = false;
            $scope.$broadcast('tableDataSetPristine');
    }
于 2013-07-22T15:28:18.757 回答
2

I did something quite similar for myself, and I used a different way, I decided to directly bind all the ng-models to the data, which let me work with the indexes if I need to check every row, but I could also decide to send the whole data to the server

Then, I just have to watch all the changes made to every index (even with big data, I just have to add/remove an integer) and store them in an array

Once finished, I can click the submit button, which will loop on every index I've touched, to check if the content is really different from the original one, and then I can do whatever I want with it (like calling a putEntity function, if I had one)

I made a fiddle based on your html code, it will be easier to play with it than with a copy/paste of the code here : http://jsfiddle.net/DotDotDot/nNwqr/1/

The main change in the HTML is this part, binding the model to the data and adding a change listener

<td><input type="text" ng-model="data[$index].title" ng-change="notifyChange($index)"/></td>

I think the javascript part is quite understandable, I log indexes while the data is modified, then, later, when I click on the submit button, it can call the right function on the modified rows only, based on the logged indexes

于 2013-07-23T15:37:11.340 回答