angular排序和删除

html>
<html>
<head>
    <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>
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>

你可能感兴趣的:(angular排序和删除)