网页分页2

来源：互联网发布：盛京时报数据库编辑：程序博客网时间：2024/06/05 14:29

<!DOCTYPE html>
<html >
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
       <title></title>
       <link rel="stylesheet" href="lib/css/ionic.min.css" />
       <script type="text/javascript" src="lib/js/ionic.bundle.min.js" ></script>
       <script src="libs/angular-route.js" ></script>



       <script>
            angular.module('myApp',['ngRoute'])
            .config(function($routeProvider){
                $routeProvider.when('/1',{templateUrl:"news.html",
               controller:"news"
               })
               .when('/2',{templateUrl:"table2.html",
               controller:"demoC"
               })
               .when('/3',{templateUrl:"users.html"})
                .otherwise({
                   redirectTo:'/1'
                });
            })
            .controller("news",function($scope){
               $scope.list=[{"title":"没商检","img":"img/s1.jpg","neirong":"撒发生纠纷南大街女冬张男短裤女张那个女卡萨丁女看到女的叫女可是女你倒是张加快速度几点上课上课了都快来开封的女人"},{"title":"最最卒子","img":"img/s2.jpg","neirong":"撒发生纠纷南大街女冬张男短裤女张那个女卡萨丁女看到女的叫女可是女你倒是张加快速度几点上课上课了都快来开封的女人"}];
           })
            .controller("demoC", function($scope, $routeParams,$filter,$http) {
                   var type = $routeParams.type;//分类
                   $http.get('sings.json').success(function(data) {
                       //获取json中的数据
                       $scope.datas = data;
                       //创建数组过滤器
                       var $f=$filter("filter");
                       //过滤数据,根据选择的类别,进行对应显示
                       $scope.sings=$f(data,{type:type});

                   }).error(function() {
                       alert("an unexpected error ocurred!");
                   });

               })
        </script>
   </head>
   <body ng-app='myApp'>

   <div ng-view>
   </div>

    <div class="tabs">
      <a href="#/1" >
        <button style="width: 100px;" class="button button-outline button-calm">新闻</button>
      </a>
      <a href="#/2" >
        <button style="width: 100px;" class="button button-outline button-calm">歌曲</button>
      </a>
      <a href="#/3" >
       <button style="width: 100px;" class="button button-outline button-calm">个人信息</button>
      </a>
    </div>
   </body>
</html>

阅读全文

0 0