AngularJS 在一个控制器中读取、创建、编辑、删除功能

Question

我有这样一个控制器：

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' );
});

}]);

我发现 'motivation' return 所有对象，当我需要在 saveChangesMotivation() 和 deleteMotivation 一个特定的对象。我在其他控制器中使用了这个功能，但没有一起使用，它们工作正常。我该如何解决这个问题？

编辑：查看

<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 函数并在我的网络控制台中检查它时，该函数显示错误，我没有设置任何东西，可能是因为 'motivation' return 所有对象而不是一个特定对象.我知道 returns 都是对象，因为在此函数中使用了 console.log( $scope.motivation ) 并在控制台中看到了这一点。对不起我的英语。

Answer 1

我认为这是可行的，因为您必须根据要执行的操作使用不同的方法。如果要获取数据使用方法GET $http.get()，如果要提交数据使用方法POST $http.post()，依此类推。

获取 ($http.get)
头（$http.head）
POST ($http.post)
删除（$http.delete）
PUT ($http.put)
JSONP ($http.jsonp)

希望对您有所帮助。

Answer 2

您在 ng-repeat 期间将整个集合传递给每个函数：

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

对于您的每个函数调用，将 "motivation" 更改为 "m"，这是您用来定义转发器的变量 (ng-repeat="m in motivator")

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

其他函数依此类推。然后您将在每个函数中拥有特定对象，而不是整个集合。

Answer 3

虽然我不确定你的问题是什么，但我想指出，通常情况下，在你的控制器中有服务器请求是个坏主意。最好将它们放在服务或工厂中，并在需要时调用它们。这将使您的代码更 re-usable 并且更易于测试。

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 服务异步运行 returns 承诺。您现在可以像这样从控制器调用服务。

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);
});

注意上面的代码还没有实现，不过应该给大家一个大纲。

AngularJS 在一个控制器中读取、创建、编辑、删除功能

AngularJS read, create, edit, delete functions in one controller

controller

crud

angularjs