2016-10-13 2 views
1

Ich möchte ID mit Pop-up anzeigen, wenn ich auf Schaltfläche löschen klicken. aber wenn ich auf den Löschen-Button klicke, funktioniert es nicht. Wenn ich die Konsole im inspect-Element überprüfe, sagen sie listData nicht undefiniert. Kann mir bitte jemand helfen? Ich bin neu in AngularJS Ansicht:Wie ID mit angularjs anzeigen

<!DOCTYPE html> 
<html> 
<head> 
    <title>CRUD</title> 
    <style type="text/css"> 
     .table{ 
      border-collapse: collapse; 
     } 

     tr,td,th{ 
      border: 1x solid #000; 
      padding: 5px; 
     } 

     td{ 
      width: 300px 
     } 
    </style> 
</head> 
<body ng-App="myAPP"> 
<div ng-controller="MainController"> 
    <table class="table"> 
     <tr> 
      <th>ID</th> 
      <th>Nama</th> 
      <th>Alamat</th> 
      <th>Action</th> 
     </tr> 
     <tr ng-repeat="x in listData"> 
      <td>{{x.id}}</td> 
      <td>{{x.nama}}</td> 
      <td>{{x.alamat}}</td> 
      <td> 
       <a href="#" ng-click="del(x.id)">Delete</a> 
       <a href="#" ng-click="update(x.id)">Edit</a> 
      </td> 
     </tr> 
    </table> 
</div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="controller/MainController.js"></script> 
</body> 
</html> 

Controller:

app.controller('MainController',['$scope',function($scope){ 
    $scope.listData = [ 
     { 
      'id' : 01, 
      'nama' : 'Faizah Pratiwi', 
      'alamat' : 'Malang' 
     }, 
     { 
      'id' : 02, 
      'nama' : 'Anastasya Putri', 
      'alamat' : 'Jember' 
     }, 
     { 
      'id' : 03, 
      'nama' : 'Sharon Natalia', 
      'alamat' : 'Tulungagung' 
     }, 
     { 
      'id' : 04, 
      'nama' : 'Faizah Pratiwi', 
      'alamat' : 'Malang' 
     }, 
    ]; 

    $scope.del = function(id){ 
     var index = getSelectedIndex(id); 
     alert(index); 
     $scope.listData.slice(index,1); 
    }; 
    function getSelectedIndex(id){ 
     for (var i = 0; i < listData.length; i++) { 
      if($scope.listData[i].id==id) 
       return i; 
      return -1; 
     } 
    } 
}]); 
+0

Ist der Wert von id gibt hier richtig? Ich meine, wenn du eine ganze Zahl schreiben willst, dann nenne einfach 1,2,3 oder 4, ansonsten benutze sie als Zeichenfolge wie '01', '02', '02 usw. Auch was siehst du an der Stelle von ID? –

+1

Ich denke 'Return -1;' ist an der falschen Stelle – Ivan

Antwort

1

Es sagt nicht definiert, da sollte es $scope.listData sein,

function getSelectedIndex(id){ 
     for (var i = 0; i < $scope.listData.length; i++) { 
      if($scope.listData[i].id==id) 
       return i;    
     } 
     return -1; 
    } 

Auch ist es nicht schneiden, es ist Spleiß

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

Anstatt zu tun, dass Sie direkt den Index von Array mit diesem Stück Code löschen,

$scope.del = function(index) { 
    alert(index); 
    $scope.listData.splice(index, 1); 
    }; 

Demo

DEMO WITH STRAIGHT FUNCTION

+0

danke. es funktioniert –

+1

Oben Funktion hat Problem, es arbeitete nur für den ersten Fall für nachfolgende Fälle, es gibt immer -1 zurück, da -1 innerhalb für Schleife zurückgegeben wurde. –

+0

@SumitDeshpande es ist nur ein Beispiel – Sajeetharan

1

Wenn Sie AngularJS für Front-End verwenden Sie dont muss ID für das nicht übergeben, eckigs ng-wiederholen Sie einen Index für Ihr Array. So können Sie direkt $ Index innerhalb Ihrer Methode wie geben:

<a href="#" ng-click="del($index)">Delete</a> 
<a href="#" ng-click="update($index)">Edit</a> 

und dann einen bestimmten Index von Array splice:

$scope.del = function(index){ 
    alert(index); 
    $scope.listData.splice(index,1); 
}; 

Dies wird Ihre zusätzlichen Aufwand sparen :) prüfen plunker

0

Erstellt das plunker Beispiel für das gleiche.

Funktionen geändert, wie unten -

$scope.del = function(id) { 
    var index = getSelectedIndex(id); 
    alert(index); 
    if (index > -1) { 
     $scope.listData.splice(index, 1); 
    } 
    }; 

    function getSelectedIndex(id) { 
    for (var i = 0; i < $scope.listData.length; i++) { 
     if ($scope.listData[i].id === id) 
     return i; 

    } 
    return -1; 
    }