Question

当我点击按钮删除时，我想弹出一个id。但是当我点击删除按钮时，它不起作用。当我在inspect元素中检查控制台时，他们说listData不是未定义的。有人帮我吗？我是angularjs的新手观点：

<!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>

控制器：

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

Answer 1

它表示未定义，因为它应该是$scope.listData，

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

它也不是切片，它是拼接

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

您可以使用这段代码直接从数组中删除索引，而不是这样做，

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

Demo

<强> DEMO WITH STRAIGHT FUNCTION

Answer 2

如果你正在使用angularjs作为前端，你不需要传递id，angular＆＃39; s ng-repeat会为你的数组生成一个索引。所以你可以直接在你的方法中传递$ index，如：

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

然后从数组中拼接一个特定的索引：

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

这将节省您的额外努力:) 查看plunker

Answer 3

为此创建了plunker示例。

更改了以下功能 -

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

如何用angularjs显示id

3 个答案: