AngularJS чтение, создание, редактирование, удаление функций в одном контроллере

0

У меня такой контроллер:

myCtrls.controller( 'profile' , [ '$scope' , '$http', '$timeout' , function( $scope , $http, $timeout ){

$scope.saveChangesMotivation = function ( motivation ) {

    $http.post( 'api/admin/motivation/updateMotivation/', {
        motivation : motivation
    } ).
    success( function( data ){
        $scope.msg = true;

        $timeout(function(){
            $scope.msg = false;
        }, 1500);
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$scope.deleteMotivation = function ( motivation , $index ) {

    if( !confirm( 'Czy na pewno chcesz usunac ten motivation?' ) )
        return false;

    $scope.motivation.splice( $index , 1 );

    $http.post( 'api/admin/motivation/deleteMotivation/', {
        motivation : motivation
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$scope.createMotivation = function ( motivation ) {

    $http.post( 'api/admin/motivation/createMotivation/', {
        motivation : motivation
    } ).

    success( function( data ){
        $scope.msgMot = true;

        $timeout(function(){
            $scope.msgMot = false;
            $scope.motivationForm = false;
            $scope.motivation = {};
        }, 1500);
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$http.get( 'api/admin/motivation/getMotivation' ).
success( function( data ){
    $scope.motivation = data;
}).error( function(){
    console.log( 'Bład komunikacji z API' );
});

}]);

И я узнаю, что "мотивация" возвращает все объекты, когда мне нужно в saveChangesMotivation() и deleteMotivation, один конкретный объект. Я использовал эти функции в других контроллерах, но не вместе, и они отлично работают. Как я могу это решить?

EDIT: Просмотр

<div ng-click="motivationForm = true; boredForm = false; goalsForm = false" ng-show="!motivationForm">Add</div>
        <div ng-click="motivationForm = false" ng-show="motivationForm">Hide</div>
        <div ng-show="!showAllMot" ng-click="showAllMot = true">Show</div>
        <div ng-show="showAllMot" ng-click="showAllMot = false">Hide</div>
        <div ng-show="motivationForm">
            <br>
            <div class="row">
                <form ng-submit="createMotivation( motivation )">

                    <div class="col-xs-8"><input type="text" class="form-control inline" placeholder="Dodaj tekst motywacyjny" ng-model="motivation.text"></div>
                    <div class="col-xs-4">
                        <button type="submit" ng-show="!msgMot">Sobmit</button>
                        <button type="submit" class="btn btn-success pull-right inline" ng-show="msgMot" disabled>Saved</button>
                    </div>
                </form>
            </div>
        </div>
        <hr>
        <div ng-show="showAllMot">
            <div ng-repeat="m in motivation">
                <form ng-submit="saveChangesMotivation( motivation )">
                    <div class="row">
                        <div class="col-xs-9">
                            <div ng-show="!editMot">{{m.text}}</div>
                            <input type="text" ng-model="m.text" ng-show="editMot" />
                        </div>
                        <div class="col-xs-3 text-right">

                            <button ng-show="!editMot" ng-click="editMot = true">Edit</button>
                            <button type="submit" ng-show="editMot" ng-click="editMot = false">Save</button>
                            <button ng-click="deleteMotivation( motivation , $index )">Delete</button>
                        </div>
                    </div>  
                </form>
            </div>
            <hr>
        </div>

Когда я использовал, например, функцию createMotivation и проверил ее в моей консоли в сети, которая работает, чем показывает мне ошибку, что я ничего не устанавливаю, возможно, потому что "мотивация" возвращает все объекты вместо одного конкретного. Я знаю, что возвращает весь объект, потому что в этой функции используется console.log($ scope.motivation) и видел это в консоли. Извините за мой английский.

  • 0
    Пожалуйста, объясните проблему более подробно, трудно понять, в чем ваша проблема. Также покажите, где вы передаете аргументы из вашего HTML
  • 0
    Проверьте меня Редактировать пожалуйста
Теги:
controller
crud

3 ответа

0
Лучший ответ

Вы передаете всю коллекцию каждой функции во время ng-repeat:

<form ng-submit="saveChangesMotivation( motivation )">

Для каждого из ваших вызовов функций измените "мотивацию" на "m", которая является переменной, которую вы использовали для определения повторителя (ng-repeat = "m в мотиваторе")

<form ng-submit="saveChangesMotivation( m )">

и т.д. для других функций. Тогда у вас будет конкретный объект в каждой функции, а не для всей коллекции.

Поделиться
  • 0
    Почти отлично, saveChangesMotivation () и deleteMotivation () работают, но createMotivation () нет :(
  • 0
    Это на самом деле та же проблема. Вам вообще не нужно ничего передавать в функцию создания. Создайте новый объект, чтобы добавить в функцию (или расширить его по умолчанию), добавить его в коллекцию $ scope.motivator и отправить коллекцию на сервер. Аналогично для функции удаления, просто передайте индекс и склейте его из вашей коллекции $ scope.motivation, которая затем передается на сервер для сохранения. Многие из этих проблем становятся более очевидными, если вы структурируете свое угловое приложение, используя службы и т. Д., Как упоминалось в другом ответе.
Показать ещё 1 комментарий
0

Хотя я не уверен, в чем заключается ваша проблема, я хотел бы указать, что, как правило, наличие серверных запросов в вашем контроллере - плохая идея. Было бы лучше разместить их на службе или на заводе и называть их, когда это необходимо. Это сделает ваш код более пригодным для повторного использования и более простым в тестировании.

app.factory('MyDataFactory', ['$http',
  function($http){
    motivationFactory = {};
     var create = function() {
        $http.post(); // Your post() code here
    }

    var read = function() {
        $http.get();  // Your get() code here
    }

    var update  = function() {
        $http.put();  // Your put() code here
    }

    var delete = function() {
        $http.delete();  // Your delete() code here
    }

    motivationFactory.create = create;
    motivationFactory.read= read;
    motivationFactory.update= update;
    motivationFactory.create = delete;

    return motivationFactory;
  }]);

Служба $http запускается асинхронно, дает обещание. Теперь вы можете вызвать службу с контроллера, как это.

app.controller('MotivationController', function($scope, MyDataFactory) {
  MyDataFactory.read().then(function successCallback(response){
    // this callback will be called asynchronously when the response is available
    $scope.motivation = response;
  }, function errorCallback(response){
   // called asynchronously if an error occurs or server returns response with an error status.
    console.log(response);
});

Обратите внимание, что приведенный выше код не был реализован, но должен дать вам схему.

Поделиться
  • 0
    Надо попробовать с этим.
0

Я думаю, что это работает так, что вы должны использовать разные методы в зависимости от того, что вы хотите делать. Если вы хотите получить метод использования данных GET $http.get(), если вы хотите использовать метод использования данных POST $http.post() и так далее.

  • GET ($http.get)
  • HEAD ($http.head)
  • POST ($http.post)
  • DELETE ($http.delete)
  • PUT ($http.put)
  • JSONP ($http.jsonp)

Надеюсь, это поможет.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню