AngualrJS 代码中过滤

来源：互联网发布：动漫设计软件手机软件编辑：程序博客网时间：2024/06/05 03:37

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>

阅读全文

0 0