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

Question

我是 Angular 的新手，我有一个问题找不到解决方案。感谢您的帮助。

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

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

但是如何拦截 Controllers 数据变化以及如何知道被改变对象的确切索引或类似的东西？非常感谢!

数据模型相当简单。月份(一月、二月、三月...)包含一个月中每一天的一些值:

{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