当ng-model输入值改变时，如何通过AJAX更新服务器上的数据

Question

我是Angular的新手，我有一个问题我无法找到解决方案。任何帮助表示赞赏。

我正在使用$http.get("/admin/getGraphData")从服务器向控制器提取所有数据。当用户编辑<input>元素时，控制器中的数据由Angular更新。当发生这种情况时，我希望立即更新服务器（MySQL）上的数据。有没有一种简单的方法来实现这一目标？如果我能做这样的事情：

$scope.onDayValueChange(month, year, day, newValue){
    $http.post("/admin/updateDayValue", {...})
}

但是如何拦截控制器数据更改以及如何知道正在更改的对象的确切索引或类似的内容？非常感谢！

数据模型非常简单。月份（jan，feb，mar ...）包含一个月中每天的某些值：

{month: 1, year: 2013, data:[{day:1, val:11}, {day:2, val:14}, ..., {day:31, val:80}]}
{month: 2, year: 2013, data:[{day:1, val:22}, {day:2, val:124}, ..., {day:30, val:2}]}
...

在HTML中，它看起来像这样：

代码：

<div ng-app="graph" ng-controller="GraphCtrl">
    <ul>
        <li class="monthItem" ng-repeat="monthItem in months">
            <span>
                {{monthNames[monthItem.month-1]}} 
                ({{monthItem.month}}. 
                {{monthItem.year}}.)</span>

            <ul class="monthDays">
                <li ng-repeat="dayItem in monthItem.data">
                    <label>{{dayItem.day}}.
                    <input type="number" 
                        ng-model="dayItem.val"
                        value="{{dayItem.val}}"
                        min="0" required>
                    </label>
                </li>
            </ul>

        </li>
    </ul>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script>
    var app = angular.module('graph');
    app.controller('GraphCtrl', function($scope, $http) {

    getData(); // load all data to the model

    function getData(){
        $http.get("/admin/getGraphData").success(function(data){
            $scope.months = data;
        })
    };

    $scope.monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
});
</script>

Answer 1

ngBlur是个不错的选择。离开输入字段后，你的POST（PUT可能更合适）。

https://docs.angularjs.org/api/ng/directive/ngBlur