'Splice function in AngularJS using laravel4 framework

I just have little doubt in using splice function in AngularJS. Actually I want to delete the row from View Page also. Data is getting deleted from database but the effect is visible only after refreshing the page and I dont want to reload the page, I just want to delete the row from View Page also without reloading the page. Please help with this.

AngularJS

$scope.deleteFunc = function(deleteId)
          {

            $http.get("http://localhost/crud/public/rectangle_delete_page/"+deleteId)
            .then(function successCallback(response)
            {
              var del_obj = {};
              del_obj.del_id = id;
              $scope.select_rectangle.splice(del_obj);

              console.log('successCallback');
              console.log(response);
              alert("Rectangle with id "+deleteId+", deleted..!");
            },
            function errorCallback(response)
            {
              console.log('errorCallback');
              console.log(response);
            });
          };

View Page

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container">
        <h2>Rectangle dimension</h2><br/>
        <table><td>
        <div>
            <table border=1>
                <tr><td>Height:</td><td><input type="text" ng-model="lngth"><br/></td></tr>
                <tr><td>Width:</td><td><input type="text" ng-model="brdth"><br/></td></tr>
                <tr><td><input ng-click="insertFunc(lngth,brdth)" type="submit" value="Submit"></td></tr>
            </table>
        </div></td>

        <td>
        <div style="border:1px solid red; margin-top:10px; height:100px; width:100px">
            <div style="height:{{lngtha}}px; width:{{brdtha}}px; max-width:100%; max-height:98%; margin-top:10px; background-color:yellow;"></div>
        </div>
        </td>


        <td>
            <div class="table-responsive">
                <table class="table table-condensed" border=1>
                    <tr>
                        <th>ID</th>
                        <th>Length</th>
                        <th>Breadth</th>
                        <th>Draw Rectangle</th>
                        <th>Done</th>
                        <th>Delete</th>
                    </tr>
                    <tr ng-repeat="x in select_rectangle">
                        <td>{{x.id}}</td>
                        <td>{{x.length}}</td>
                        <td>{{x.breadth}}</td>
                        <td><input ng-click='show = true' type="submit" value="Draw" ng-model="myVar"></td>
                        <td width="100%" height="100%">
                            <div style="border:1px solid red; height:100px; width:100px">
                                <div style="height:{{x.length}}px; width:{{x.breadth}}px; max-width:100%; max-height:100%; background-color:yellow" ng-init='show = false' ng-show='show'/></div>
                            </div>
                        </td>
                        <td><input type="submit" value="Delete" ng-click="deleteFunc(x.id)"></td>
                    </tr>
                </table>
            </div>
        </td>
        </table>
    </div>

Controller in laravel

public function rectangle_delete_function(Request $request)
    {
      $deleteId = $request->id;
      return $rect_delete_query = DB::table('rectangle')->where('id', '=', $deleteId)->delete(); 
    }

Route

Route::get('/rectangle_json_page', 'NewController@rectangle_json_function');

Route::get('rectangle_delete_page/{id}', 'NewController@rectangle_delete_function');
mysqllaravel-4


Solution 1:[1]

I just updated AngularJS like this

AngularJS

$scope.insertFunc = function(lngth,brdth) {

        $scope.lngtha = lngth*0.375;
        $scope.brdtha = brdth*0.375;
     
        $http({
          method  : 'POST',
          url     : 'http://localhost/crud/public/insert_rectangle_dimension_page',
          data    : {lngth:$scope.lngth, brdth:$scope.brdth}
         })
        .then(function successCallback(response)
        {
            var obj = {};
            obj.length = lngth;
            obj.breadth = brdth;
            $scope.select_rectangle.unshift(obj);
            console.log(successCallback);
            console.log(response);

        },

        function errorCallback(response)
        {
            console.log('errorCallback');
            console.log(response);
        });
        }

But I am in trouble, I am not fully satisfied with this, I want to fetch data from DataBase and to display on VIEW Page, currently it is direct inserting, not fetching from DataBase. Please help to fetch from DataBase.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nimantha

Related Questions