Как обновить элемент в AngularJS, не используя маршруты

Question

Как обновить элемент в AngularJS, не используя маршруты

0

Привет всем, кто я сейчас делаю CRUD для ресторана (школьный проект), я могу отображать все мои элементы из моего API Rest, я могу удалить элемент, также могу создавать новые элементы. Но моя проблема в том, что я не знаю, как обновить элемент. Я использую обновление $ resource, это мой код: здесь я показываю свои блюда и убираю 2 кнопки, в первой кнопке я получаю идентификатор этого элемента.

<tbody>
     <tr ng-repeat = "dish in dishes | filter:sort">
         <td>{{dish.name}}</td>
         <td>{{dish.description}}</td>
         <td>{{dish.price | currency}}</td>
         <td>{{dish.category}}</td>
         <td>
            <button ng-click = "eliminarPlatillo(dish._id)" class = "glyphicon glyphicon-remove-circle btn btn-danger"></button>
            <button ng-click = "modificarPlatillo(dish._id)" data-toggle = "modal" data-target = "#editarModal" class = "glyphicon glyphicon-pencil btn btn-success"></button>
         </td>
      </tr>
</tbody>

Теперь, когда я щелкнул элемент и получил его id, в модальном я поместил новые данные:

div id = "editarModal" class = "modal fade" role = "dialog">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                    <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
                    <h4 class = "modal-title">Modificar Platillo</h4>
                </div>
                <div class = "modal-body">
                    <form role = "log" ng-submit = "modificarPlatillo()" ng-controller = "MenuController">
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "text" name = "name" id = "name" placeholder = "Nombre" class = "form-control" ng-model = "form.name">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "number" name = "price" id = "price" placeholder = "Precio" class = "form-control" ng-model = "form.price">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                             <input type = "text" name = "category" id = "category" placeholder = "Categoria" class = "form-control" ng-model = "form.category">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "file" name = "image" id = "image" placeholder = "Imagen" class = "form-control" ng-model = "form.image">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <textarea class = "form-control" placeholder = "Descripción" name = "description" id = "description" ng-model = "form.description" rows = "5" cols = "10"></textarea>
                        </div>
                        <div class = "form-group">
                            <button class = "btn btn-success" type = "submit">Aceptar</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

В ng-submit я вызываю свою функцию для обработки обновления. Теперь мой контроллер для этой функции:

$scope.modificarPlatillo = function(index) {
        console.log($scope.index);
        $scope.dish = menuService.getPlatillos().get({id:index});
        console.log($scope.dish);
        menuService.getPlatillos().update({id: index});  
    };

Я получил сообщение об ошибке PUT http://localhost: 3000/api//platillos 404 (Not Found), так или иначе это правда, потому что для удаления элемента, который вы должны предоставить id, но я делаю это в своей функции.

У вас, ребята, есть решение для моей проблемы, как использовать модальную функцию и вызывать функцию.

заранее спасибо

Изменить 1:

MenuService:

use strict';
angular.module("nightshift")
.constant("baseURL", "http://localhost:3000/api/")
.service("menuService", ["$resource", "baseURL", function($resource,    baseURL) {
    this.getPlatillos = function() {
        return $resource(baseURL + "/platillos/:id", null, {"update":{method:"PUT"}});
    };

    this.getPromociones = function() {
        return $resource(baseURL + "/promociones", null, {"update":{method:"PUT"}});
    }
}])

контроллер:

"use strict";
angular.module("nightshift")
.controller("MenuController", ["$scope", "menuService",  function($scope, menuService) {
    var indice = 0;
    $scope.dishes = menuService.getPlatillos().query(
        function(response) {
            $scope.dishes = response;
        }, 
        function(response) {
            console.log("Error: " + response.statusText);
        }
    );

    $scope.form = {name: "", description: "", price: "", category: "", image: ""};

    $scope.agregarPlatillo = function() {
        console.log($scope.form);
        menuService.getPlatillos().save($scope.form);
        $scope.form = {name: "", description: "", price: "", category: "", image: ""};  
    };

    $scope.eliminarPlatillo = function(index) {
        $scope.dish = menuService.getPlatillos().get({id:index});
        console.log($scope.dish);
        console.log(index);
        menuService.getPlatillos().remove({id:index});
    };


    $scope.getIndex = function(index) {
        indice = index;
    }

    $scope.modificarPlatillo = function(index) {
        //console.log($scope.index);
        //$scope.dish = menuService.getPlatillos().get({id:index});
        //console.log($scope.dish);
        menuService.getPlatillos().$save($scope.form); 
    };
}])

И, наконец, Platillos.html, где я вызываю свои функции и отображаю свои элементы:

div id="wrapper">

<div id = "platilloModal" class = "modal fade" role = "dialog">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                    <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
                    <h4 class = "modal-title">Alta de Platillos</h4>
                </div>
                <div class = "modal-body">
                    <form role = "log" ng-submit = "agregarPlatillo()">
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "text" name = "name" id = "name" placeholder = "Nombre" class = "form-control" ng-model = "form.name">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "number" name = "price" id = "price" placeholder = "Precio" class = "form-control" ng-model = "form.price">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                             <input type = "text" name = "category" id = "category" placeholder = "Categoria" class = "form-control" ng-model = "form.category">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "file" name = "image" id = "image" placeholder = "Imagen" class = "form-control" ng-model = "form.image">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <textarea class = "form-control" placeholder = "Descripción" name = "description" id = "description" ng-model = "form.description" rows = "5" cols = "10"></textarea>
                        </div>
                        <div class = "form-group">
                            <button class = "btn btn-success" type = "submit">Agregar</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> 


    <div id = "editarModal" class = "modal fade" role = "dialog">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                    <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
                    <h4 class = "modal-title">Modificar Platillo</h4>
                </div>
                <div class = "modal-body">
                    <form role = "log" ng-submit = "modificarPlatillo()" ng-controller = "MenuController">
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "text" name = "name" id = "name" placeholder = "Nombre" class = "form-control" ng-model = "form.name">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "number" name = "price" id = "price" placeholder = "Precio" class = "form-control" ng-model = "form.price">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                             <input type = "text" name = "category" id = "category" placeholder = "Categoria" class = "form-control" ng-model = "form.category">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <input type = "file" name = "image" id = "image" placeholder = "Imagen" class = "form-control" ng-model = "form.image">
                        </div>
                        <div class = "form-group col-sm-10 col-sm-offset-1">
                            <textarea class = "form-control" placeholder = "Descripción" name = "description" id = "description" ng-model = "form.description" rows = "5" cols = "10"></textarea>
                        </div>
                        <div class = "form-group">
                            <button class = "btn btn-success" type = "submit">Aceptar</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> 


<div id="page-wrapper">

    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                        Lista de Platillos
                    </h1>
                <ol class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-dashboard"></i> Platillos
                    </li>
                </ol>
            </div>
        </div>
        <div class = "row">
            <div class = "col-sm-2">
                <button type = "button" data-toggle = "modal" data-target = "#platilloModal" class = "btn btn-primary"><span class = "glyphicon glyphicon-plus-sign"></span> Agregar Platillo</button>
            </div>
            <div class = "pull-right form-group has-feedback">
                <input type = "text" class = "form-control" placeholder = "Buscar Platillo" ng-model = "sort">
                <span class = "glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Descripción</th>
                            <th>Precio</th>
                            <th>Categoria</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat = "dish in dishes | filter:sort">
                            <td>{{dish.name}}</td>
                            <td>{{dish.description}}</td>
                            <td>{{dish.price | currency}}</td>
                            <td>{{dish.category}}</td>
                            <td>
                                <button ng-click = "eliminarPlatillo(dish._id)" class = "glyphicon glyphicon-remove-circle btn btn-danger"></button>
                                <button ng-click = "modificarPlatillo(dish._id)" data-toggle = "modal" data-target = "#editarModal" class = "glyphicon glyphicon-pencil btn btn-success"></button>
                           </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

Antonio Kida 01 июнь 2016, в 06:41

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Pablo Adoue · Answer 1 · 2016-06-01T01-00-00.000Z

Попробуйте использовать $.save поскольку элемент уже содержит информацию о том, как взаимодействовать с API, поэтому в соответствии с моим опытом должен быть подход с лучшей практикой. Я использую и работает очень хорошо.

Изменить 1: Обычно я обрабатываю вызовы API (всегда через службы)

app.service('UsersService', function ($q, API) {
    var self = {
        'isLoading': false,
        'editMode': false,
        'list': [],
        'selected': false,
        'load': function () {
            self.isLoading = true;
            API.users.get().$promise.then(function (data) {
                angular.forEach(data.list, function (user) {
                    self.list.push(new API.users(user));
                });
                self.isLoading = false;
            });
        }, 'create': function (user) {
            var d = $q.defer();
            API.users.save(user).$promise.then(function (data) {
                self.list = [];
                self.load();
                d.resolve();
            });
            return d.promise;
        }, 'read': function (id) {
            for (var i = 0; i < self.list.length; i++) {
                var obj = self.list[i];
                if (obj.id == id) {
                    return obj;
                }
            }
        }, 'update': function (user) {
            var d = $q.defer();
            user.$save({id: user.id}).then(function (data) {
                for (var i = 0; i < self.list.length; i++) {
                    var obj = self.list[i];
                    if (obj.id == data.id) {
                        self.list[i] = data;
                    }
                }
                d.resolve();
            });
            return d.promise;
        }, 'delete': function (user) {
            var d = $q.defer();
            user.$remove({id: contact.id}).then(function (data) {
                for (var i = 0; i < self.list.length; i++) {
                    var obj = self.list[i];
                    if (obj.id == data.id) {
                        self.list.splice(i, 1);
                    }
                }
                self.selected = {};
                d.resolve()
            });
            return d.promise;
        }
    };
    self.load();
    return self;
});

Редактирование 2: И затем вы можете использовать их непосредственно через контроллер, просто вставив службу и добавив логику вашего приложения (обратите внимание, что это пример, который я использую для использования дополнительных модулей и функций, которые вам могут понадобиться):

app.controller('UsersController', function ($stateParams, $translate, $state, $scope, $rootScope, ModalService, $element, UsersService, ClientsService, ngNotify) {
    $scope.Users = UsersService;
    $scope.Clients = ClientsService;

    $scope.filterDirectory = "";
    $scope.selectedClient = 0;

    //Check if the state params have changed
    if ($state.params.id > 0) {
        $scope.$watch('Users.isLoading', function (n, o) {
            if (!n) {
                $scope.Users.selected = $scope.Users.read($state.params.id);
            }
        });
    }

    $scope.editUser = function (id) {
        if (!angular.isUndefined(id)) {
            $scope.Users.editMode = true;
        } else {
            $scope.Users.editMode = false;
            $scope.Users.selected = "";
        }

        ModalService.showModal({
            templateUrl: "app/views/users/editUser.modal.html",
            controller: "UsersController"
        }).then(function (modal) {
            $scope.modal = modal;
            $scope.modal.element.modal();
        });
    }

    $scope.saveUser = function () {
        if ($scope.Users.editMode) {
            $scope.Users.update($scope.Users.selected).then(function (data) {
                console.log(data);
                ngNotify.set(($translate.instant('success_updated_saja')), {
                    type: 'success',
                    position: 'bottom',
                    duration: 1000
                });
                $element.modal('hide');
            });
        } else {
            $scope.Users.create($scope.Users.selected).then(function (data) {
                console.log(data);

                ngNotify.set(($translate.instant('success_created_saja')), {
                    type: 'success',
                    position: 'bottom',
                    duration: 1000
                });
                $element.modal('hide');
            });
        }
    }

    $scope.removeUser = function () {
        $scope.Users.delete($scope.Users.selected).then(function (data) {
            $element.modal('hide');
            $state.go("app.users");
        });
    }

    $scope.selectClient = function (id) {
        $scope.selectedClient = id;
    }

    $scope.filterList = function (contact) {
        if ($scope.selectedClient != 0 && $scope.selectedClient != contact.client) {
            return false;
        }

        if ($scope.filterDirectory) {
            return contact.name.indexOf($scope.filterDirectory) == 0;
        }

        return true;
    }

});

Как вы можете видеть, я обрабатываю объекты, получая их (GET), а затем нажимаю их (новый API), а затем добавляю функции, которые должны обрабатывать каждый из них. Надеюсь, что это работает

С уважением

о, так вы всегда избегаете обновления ?, также используя save не создавать новый элемент? вместо того, чтобы просто изменять его? Спасибо за ответы
Обратите внимание, что я использую $ .save, а не .save, $ .save зависит от объекта и ожидает, что его конечная точка API будет обрабатывать обновление при передаче идентификатора, т.е. / users создаст пользователя, а / user / {userid} обновить существующего пользователя с идентификатором «ID пользователя». Также обратите внимание, что для его работы каждый элемент должен быть преобразован в объект с использованием нового $ resource. (Data), чтобы объект действительно содержал все методы CRUD.
Кроме того, я говорю по-испански, если вы чувствуете себя более комфортно, спрашивая на этом языке, пожалуйста, не стесняйтесь связаться со мной через чат, если я могу помочь вам. (Я видел название твоих функций)
спасибо большое, пабло, да, я хотел бы поговорить с тобой, где чат?
очень плохо :(, не могли бы вы объяснить мне, как делать то, что вы сказали мне, я получаю много внимания, спасибо
Да, позвольте мне взять мой Lap Top, и я загрузлю код для вас
Я нахожу этот код немного сложным, использует ли ваш код маршруты для работы? Мой код не использует маршруты, просто отображает все элементы с его кнопками для изменения, удаления и т. д.
Нет, я использую взаимодействие через контроллеры.
ваш код выглядит так профессионально
Спасибо. Позвольте мне добавить несколько примеров того, как я использую сервис на контроллере.
я действительно ценю вашу помощь, правда, но я не понимаю ваш код, есть ли способ, которым вы можете помочь мне, используя мою логику или мой код :(
Конечно. Опубликуйте свой полный исходный код, чтобы я мог проверить его или загрузить на plunkr и отправить ссылку.
Мне нужно увидеть сервис меню, чтобы увидеть, как вы обрабатываете. Что вы используете для бэкэнда?
Я буду обновлять его, я использую nodejs + mongodb
Проблема с вашим кодом заключается в том, что вы не определили метод «Обновление», который будет использоваться в вашей службе. Вы пытаетесь использовать подход, который я представил (API и Resource Object на основе). Попробуйте определить метод обновления.
эта часть нет? this.getPlatillos = function () {return $ resource (baseURL + "/ platillos /: id", null, {"update": {method: "PUT"}}); };
Да, прости. Не использовал этот подход в течение очень долгого времени. Вы должны заменить обновление, чтобы сохранить. Посмотрите на эту ссылку. docs.angularjs.org/api/ngResource/service/$resource
плохо выписан, спасибо за ваше время и терпение
Нет проблем. Мы все начинаем где-то. Не отказывайтесь от своего кодирования. Saludos desde Mexico.
у вас есть фейсбук? я хотел бы добавить вас, вы знаете много, я хотел бы узнать немного из того, что вы знаете
Да, вы можете добавить меня как adoue.p