首页 > 程序开发 > web前端 > JavaScript >

文章标题 、商品列表 angularJs实现教程

2017-10-16

文章标题 、商品列表 angularJs实现教程。

文章标题 、商品列表 angularJs实现教程。

<meta charset="UTF-8">
        <title>第二周预测题</title>
        <script type="text/javascript" src="../AngularJS/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>
     
     
        <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(&#39;id&#39;)">产品编号</th>
                        <th ng-click="sortProducts(&#39;name&#39;)">产品名称</th>
                        <th ng-click="sortProducts(&#39;price&#39;)">产品价格</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>

相关文章
最新文章
热点推荐