删除/全部删除/模糊查询/升降序

最新推荐文章于 2023-09-14 15:22:33 发布

By_Weicy

最新推荐文章于 2023-09-14 15:22:33 发布

阅读量378

点赞数

本文链接：https://blog.csdn.net/weikai_/article/details/78242330

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="angular.js" ></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.products = [{
                id:80,
                name:"iphone",
                price:5400
            },{
                id:150,
                name:"ipad mini",
                price:2200
            },{
                id:120,
                name:"ipad air",
                price:2340
            },{
                id:160,
                name:"ipad",
                price:1420
            },{
                id:130,
                name:"imac",
                price:15400
            }];

            $scope.sortFlag = "-";
            $scope.sortName = "name";
            //定义排序功能
            $scope.sortProducts = function(clomnName){
                $scope.sortName = clomnName;
                if($scope.sortFlag == "-"){
                    $scope.sortFlag = "";
                }else{
                    $scope.sortFlag = "-";
                }
            }

            //删除指定商品
            $scope.deleteProduct = function(name){
                //alert(name);
                //var i = -1;
                for(index in $scope.products){
                    if($scope.products[index].name == name){
                        //i = index;
                        $scope.products.splice(index,1);
                    }
                }
            }
            //全部删除
            $scope.deleteAll = function(){
                $scope.products = null;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>商品列表</h3>
    <input type="text" ng-model="serach" placeholder="产品名称" />
    <button ng-click="deleteAll()">全部删除</button><br/><br/>
    <table border="1 solde" cellspacing="0" cellpadding="10">
        <thead>
        <tr>
            <th ng-click="sortProducts('id')">产品编号</th>
            <th ng-click="sortProducts('name')">产品名称</th>
            <th ng-click="sortProducts('price')">产品价格</th>
            <th>功能</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="goods in products | filter:serach | orderBy:(sortFlag+sortName)">
            <td>{{goods.id}}</td>
            <td>{{goods.name}}</td>
            <td>{{goods.price}}</td>
            <td><button ng-click="deleteProduct(goods.name)">删除</button></td>
        </tr>
        </tbody>
    </table>
</center>
</body>
</html>

By_Weicy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
删除/全部删除/模糊查询/升降序

html>html>head> meta charset="UTF-8"> title>title> script type="text/javascript" src="angular.js" >script> script> var app = angular.module("myApp",[]); app.controlle
复制链接

扫一扫