Question

我有一些使用API调用填充的记录。我正在修改它们，现在我必须保存它们。目前我正在保存页面上加载的所有记录。但是我在每个记录前放了一个复选框，只保存选定的记录。我怎么能在AngularJS中做到这一点？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
$scope.save = function () {
        var confirmMsg = "Are you sure that you want to save selected changes?";
        popup(confirmMsg, function () {
            // When "Save" button is clicked:
            $scope.tableLoading = true;
            $http.post('/Planning/SaveAllPlanningOrdersInfo',
                JSON.stringify($scope.orders),
                {
                    headers: { 'Content-Type': 'application/json' }
                }
            ).success(function (data) {
                if (data.indexOf("Error") < 0) {
                    dial.messages.information(data);
                }
                else {
                    dial.messages.error(data);
                }
                // Reload the data:
                //$scope.getOrders();

            }
            ).error(function (error) {
                reportFriendlyAjaxError(error);
            })
            //.then(do_something, showErrorDetails)
            .finally(function () {
                $scope.tableLoading = false;
            });
        });

</script>

在上面的代码中，$ scope.orders []包含所有记录，但是我必须只获取在$ scope.orders []中选择的记录，这样我才能使用相同的函数Save（）但是选定的记录。

Answer 1

您可以在记录中添加虚拟selected字段，并在保存时按此字段使用过滤器。

＆＃13;

$scope.save = function () {
        var confirmMsg = "Are you sure that you want to save selected changes?";
        popup(confirmMsg, function () {
            // When "Save" button is clicked:
            $scope.tableLoading = true;
            $http.post('/Planning/SaveAllPlanningOrdersInfo',
                JSON.stringify($filter('filter')($scope.orders, {selected: true})),
                {
                    headers: { 'Content-Type': 'application/json' }
                }
            ).success(function (data) {
                if (data.indexOf("Error") < 0) {
                    dial.messages.information(data);
                }
                else {
                    dial.messages.error(data);
                }
                // Reload the data:
                //$scope.getOrders();

            }
            ).error(function (error) {
                reportFriendlyAjaxError(error);
            })
            //.then(do_something, showErrorDetails)
            .finally(function () {
                $scope.tableLoading = false;
            });
        });

＆＃13;

<div ng-repeat="order in orders">
  <input type="checkbox" ng-model="order.selected"/> <span ng-bind="order.title"></span>
</div>

＆＃13;

Answer 2

有很多方法可以做到这一点，一种方法是，当复选框改变时，你可以在其中添加ng-model，然后：

<div ng-repeat="order in orders">
<input type="checkbox" ng-model="order.selected" />
...
</div>

在你的控制器中：

var vm = this;
vm.selectedOrders = [];

...

$scope.orders.forEach(function(value, index) {

  if ($scope.orders[index]['selected'] == true) {

    vm.selectedOrders.push($scope.orders[index]);
  }
}

保存angularjs中复选框选中的记录

2 个答案: