更新模型和用户界面绑定更新操作 [英] updating model and binding update operations with UI

问题描述

我目前已经开发利用AngularJS一个内容表，该表将填充基于一个角服务模式，它调用Web服务并返回列表，并使用NG重复和创建表和它的所有内容。

I currently have developed a table of content using AngularJS, the table will populate based on an Angular Service "Model" which invokes a web service and returns list and using ng-repeat and creating a table and all its content.

目前一切正常，我有一个小问题，但。表的一部分，我们将输出一个操作按钮，点击它时，调用Web服务，更新当前记录。想使记录数据获取自动更新，但我必须为了查看更改刷新页面。

Everything at the moment works fine, I have a minor problem though. Part of the table, we are outputting an action button which when clicked invokes a web service which update the current record. Am trying to make the record data gets updated automatically, but i must refresh the page in order to see the changes.

下面是我的code

我的app.js

angular.module('my_vehicles', ['vehicleServices', 'AccountsDirectives']);

service.js

service.js

'use strict';

angular.module('vehicleServices', ['ngResource']).
    factory('Car', function($resource) {
        return $resource('/vehicle/api/car.json/:id', {},
            {
                query:   {method:'GET',     isArray:false},
                delete:  {method:'DELETE',  isArray:false},
                update:  {method:'PUT',     isArray:false}
            }
        );
});

controller.js

controller.js

'use strict';

function MyVehicleController($scope, Car) {

    var init = function() {
        $scope.page_has_next = true;
        $scope.cars = [];
        $scope.page = 1;
    };

    // initialize values
    init();


    Car.query({my_vehicle: true},
        // success
        function(data) {
            $scope.page_has_next = data.has_next;
            $scope.cars = data.objects;
        },
        // error
        function(data) {

        }
    );


    $scope.mark_sold = function(id, index) {
        Car.update({
            id      : id,
            status  : 'S'
        },
        function(data) {

        });
    }

    $scope.delete = function(id, index) {
        Car.delete(
            {id: id},
            // on success
            function() {
                // remove the element from cars array and it will be
                // automatically updated by ng-repeat
                $scope.cars.splice(index, 1);
                $scope.loadMore(1);
            }
        );
    }

    $scope.is_total_zero = function() {
        return !!($scope.cars.length)
        //return $scope.cars.length > 0 ? true : false
    }


    $scope.loadMore = function(limit) {
        if($scope.page_has_next) {
            $scope.$broadcast('loading_started');
            console.log(limit);
            Car.query({my_vehicle: true, page: $scope.page, limit: limit},
                // success
                function(data) {
                    $scope.page_has_next = data.has_next;
                    $scope.cars = $scope.cars.concat(angular.fromJson(data.objects));
                    $scope.page++;
                    $scope.$broadcast('loading_ended');
                },
                // error
                function() {
                    $scope.page_has_next = false;
                    $scope.$broadcast('loading_ended');
                }
            );
        }
    }


    $scope.$on('loading_started', function() {
        $scope.state = 'loading';
    });

    $scope.$on('loading_ended', function() {
        $scope.state = 'ready';
    });


}

终于，我的HTML code

and finally, my html code

                    <tr ng-repeat="car in cars">
                        <td><a href="{% ng car.get_absolute_url %}">{% ng car._get_model_display.make_display %} {% ng car._get_model_display.model_display %} {% ng car._get_model_display.trim_display %}</a></td>
                        <td>{% ng car.created_at_format %}</td>
                        <td>{% ng car.view_count %}</td>
                        <td ng-model="car.status_label">{% ng car.status_label %}</td>
                        <td>
                            <div class="btn-group">
                                <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-model="edit" class="btn btn-mini edit-btn">{% trans 'Edit' %}</button>
                                <button ng-disabled="car.status == 'S'" ng-click="delete(car.id, $index)" class="btn btn-mini delete-btn">{% trans 'Delete' %}</button>
                                <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-click="mark_sold(car.id, $index)" class="btn btn-mini edit-btn">{% trans 'Mark as sold' %}</button>
                            </div>
                            </td>
                        </tr>

PS的{％NG XXX％}的输出{{XXX}}，使用上述语法，因为Django的模板引擎不允许我用我{{}}所以，我制定了templatetag那会输出{{ }} ..

P.S the {% ng XXX %} is outputting {{ XXX }}, am using the above syntax because django templating engine does not allow me to use {{}} so i've developed a templatetag that would output {{}} ..

正如前面提到的，我的问题是，每次我调用一次标记为卖它会调用cars.update（），但它不会更新记录中显示，必须刷新看到的变化。任何想法如何，我可以解决这个问题？

As mentioned earlier, my problem is that every time I invoke "mark as sold" it would invoke the cars.update() but it will not update the record displayed, must refresh to see changes. Any idea how i can solve this?

推荐答案

据我了解你的code你只而不更新汽车模型（$ scope.cars），这样的变化不仅仅体现在更新数据库分贝，但不是在AngularJS应用

As far as I understand your code you only update the db without updating the cars model ($scope.cars) so changes are only reflected in the db but not in the AngularJS application.

也许尝试以下操作：

$scope.mark_sold = function(id, index) {
    Car.update({
        id      : id,
        status  : 'S'
    },
    function(data) {
        $scope.cars[id].status = 'S';
    });
}

这篇关于更新模型和用户界面绑定更新操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！