AngualrJS 代码中过滤

最新推荐文章于 2020-08-15 14:03:57 发布

ms_勇往直前

最新推荐文章于 2020-08-15 14:03:57 发布

阅读量217

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/mhw828/article/details/78607668

版权

AngualrJS 代码中过滤

2017/11/20 14:40:51

效果

代码


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script type="text/javascript" src="js/angular.min.js"></script>

        <script type="text/javascript">


            var app = angular.module("msApp", []);

            app.controller("msCtrl", function ($scope, $http, $filter) {


                //保存完整的数据
                $scope.datacomplete
                //展示的数据
                $scope.data


                $http.get("data.json").then(function (response) {


                    $scope.datacomplete = response.data
                    $scope.data = $scope.datacomplete
                })

                $scope.setClassification = function (mtype) {


                    /**核心代码*/


                    //过滤器数组
                    $f = $filter("filter")
                    //过滤
                    $scope.data = $f($scope.datacomplete, {"type": mtype});


                    /**************************************************************/
                }


            })


        </script>

    </head>
    <body ng-app="msApp" ng-controller="msCtrl">
    <button ng-click="setClassification('')">全部</button>
    <button ng-click="setClassification('电脑')">电脑</button>
    <button ng-click="setClassification('手机')">手机</button>
    <button ng-click="setClassification('衣服')">衣服</button>


    <p>{{data}}</p>

    </body>
    </html>