Удалить запись с помощью углового

Question

ПРОБЛЕМА

Здравствуйте! Я хочу удалить запись с помощью углового. Так что это должно выглядеть так: я нажимаю кнопку «X» (удалить), и запись должна быть удалена.

ЧТО Я ПОЛУЧИЛ НА СЕЙЧАС

Я не знаю, если все правильно, но есть мой код:

HTML

<div ng-repeat="lists in listsdata.lists"> 
        <div id="DIV_24" close-on-outside-click="div.popup_information"> 
         <button ng-click="lists.show = !lists.show" id="MORE_BUTTON">:</button> 
         <div class="popup_information" ng-show="lists.show"> 

           <button id="DELETE_BUTTON" ng-click="del_list()">X</button> 

          <a href=""> 
           <button id="EDIT_BUTTON">E</button> 
          </a> 
         </div> 
         <a href="#/{{lists.id}}"> 
          <div id="DIV_25"> 
           {{lists.name}} 
          </div> 
          <div id="DIV_26"> 
          </div> 
        </div></a> 
       </div> 

угловой

myApp.controller('listsController', ['$scope', '$log', '$http', 
    function($scope, $log, $http){ 

     $http({ 
      method: 'GET', 
      url: 'http://localhost/anydocopy/public/lists' 
     }) 
      .success(function (d) { 
       console.log(d); 
       $scope.listsdata = d; 
      }); 

     $scope.key = function($event){ 
      console.log($event.keyCode); 
      if ($event.keyCode == 13) { 
       var list = { 
        name: $scope.listname 
       }; 
       $scope.listname = ''; 
        $http({ 
        method: 'POST', 
        url: 'http://localhost/anydocopy/public/lists', 
        data: list 
       }) 
        .success(function() { 
         console.log('true'); 
         $http({ 
          method: 'GET', 
          url: 'http://localhost/anydocopy/public/lists' 
         }) 
          .success(function (d) { 
           console.log(d); 
           $scope.listsdata = d; 
          }); 
        }) 
        .error(function() { 
         console.log('false'); 
        }); 
      }}; 

     $scope.del_list = function() { 
      $http({ 
       method: 'DELETE', 
       url: 'http://localhost/anydocopy/public/lists/'+ $scope.listsdata.lists.id 
      }); 
      console.log($scope.listsdata.lists) 
     } 

     }]); 

контроллер laravel

public function delete($id) 
{ 
    $response['lists'] = Lists::findorfail($id)->delete(); 

    return Response($response, 201); 
} 

Laravel маршрут

Route::delete('lists/{id}', 'ListsController@delete'); 

Так теперь, когда я нажимаю кнопку, я не могу установить правильный URL в agular функции, потому что я не могу получить, что идентификатор из $ scope.listsdata .. я могу получить весь массив, но как получить только идентификатор, который я хочу? Поэтому, если я нажимаю на кнопку, что есть в списке с id = 1, поэтому в угловой функции должно работать как метод = delete и url = url + id. Как это сделать, пожалуйста, помогите.

Answer 1

Передайте то, что вы хотите удалить как аргумент. И переименовать lists в list, поскольку он представляет собой единый список:

<div ng-repeat="list in listsdata.lists"> 
    ... 
    <button ng-click="del_list(list)">X</button> 

и

$scope.del_list = function(listToDelete) { 
    $http({ 
     method: 'DELETE', 
     url: 'http://localhost/anydocopy/public/lists/'+ listToDelete.id 
    }); 
} 

Answer 2

Pass аргумент в функции нг-клик, которую хотите удалить, как

<div ng-repeat="list in listsdata.lists"> 
    ... 
    <button ng-click="del_list(list)">X</button> 
</div> 

вы Удалить функция выглядит как

$scope.del_list = function(selectedItem) { 
    $http({ 
     method: 'DELETE', 
     url: 'http://localhost/anydocopy/public/lists/'+ selectedItem.id 
    }); 
console.log($scope.listsdata.lists) 
}