javascript - 如何用angularjs显示id

标签 javascript angularjs

我想在单击删除按钮时显示带有弹出窗口的 ID。但是当我点击删除按钮时,它不起作用。当我在检查元素中检查控制台时,他们说 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>

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

最佳答案

它说未定义,因为它应该是 $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

关于javascript - 如何用angularjs显示id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40012102/

相关文章:

php - 通过 javascript 添加金额的 onclick 函数

javascript - 数据在一页上的多个 Aurelia 应用程序之间移动

javascript - AngularJs - 在 <img> 标签的 onclick 事件上调用 $scope 函数

javascript - 带有 ng-repeat 的自定义选项卡不起作用

javascript - AngularJS:将 HTML 代码显示到 ng-view 及其结果中(以导航形式,如 Html、Css、JS、Result)

php - 在php while循环中显示js

javascript - 悬停时获取值会产生 "undefined"

javascript - 如何从另一个函数调用 Express 函数?

javascript - AngularJS:如何隐藏 Controller div,然后在同一位置显示另一个 Controller div?

javascript - Angularfire $loaded().then(从这里返回一些东西)