angularJs删除一整行(Dome)

最新推荐文章于 2019-03-16 18:03:00 发布

世间百态不过尔尔

最新推荐文章于 2019-03-16 18:03:00 发布

阅读量722

点赞数

分类专栏： angularjs 文章标签： angularJs删除一整行(Dome)

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88585627

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src = "angular.min.js"></script>
    <style type="text/css">
        table{
            border: 1px solid #000;
            border-collapse:collapse;
        }
        td{
            border: 1px solid #000;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="controller">
    <div ng-init="persons = [{name:'张三',stu:1001,age:10,sex:'男'},
                             {name:'李四',stu:1002,age:14,sex:'女'},
                             {name:'二狗',stu:1003,age:34,sex:'女'},
                             {name:'王五',stu:1004,age:20,sex:'未知'}]">
    <table>
        <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr ng-repeat="obj in persons">
            <td ng-bind="obj.name"></td>
            <td ng-bind="obj.stu"></td>
            <td ng-bind="obj.age"></td>
            <td ng-bind="obj.sex"></td>
            <td><button ng-click="delete($index)">删除</button></td>
        </tr>
    </table>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("controller",function($scope){
            $scope.delete = function(index) {
                $scope.persons.splice(index,1 );
            };
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.min.js"></script>
    <style>
        table,td,th{
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body ng-app="app" ng-controller="myVC">

    <table>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat = "stu in stuArr">
            <td ng-bind="stu.name"></td>
            <td ng-bind="stu.num"></td>
            <td ng-bind="stu.age"></td>
            <td ng-bind="stu.sex"></td>

            <!-- 按钮的点击事件，将当前按钮对应的对象传递到触发事件中 -->
            <!-- <td><input type="button" value="删除" ng-click="delete(stu)"></td> -->

            <!-- $index是ng-repeat中的下标 -->
            <td><input type="button" value="删除" ng-click="delete($index)"></td>
        </tr>
    </table>

    <script>
        var app = angular.module("app",[]);
        app.controller("myVC",function($scope){
            //定义数组
            $scope.stuArr = [
                {
                    name:"张三",
                    age:20,
                    sex:'男',
                    num:"1001"
                },{
                    name:"李四",
                    age:20,
                    sex:'男',
                    num:"1002"
                },{
                    name:"王五",
                    age:20,
                    sex:'男',
                    num:"1003"
                },{
                    name:"赵六",
                    age:20,
                    sex:'男',
                    num:"1004"
                }
            ];

            // $scope.delete = function(s){
            //     var index = $scope.stuArr.indexOf(s);
            //     console.log(index);
            //     $scope.stuArr.splice(index,1);
            // }

            $scope.delete = function(index){
                $scope.stuArr.splice(index,1);
            }
        });
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularJs删除一整行(Dome)

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src = "angular.min.js"&gt;&lt;/script&gt; &lt;style ty
复制链接

扫一扫