基本介绍
1、引入的route模块可以对路由的变化做出响应
2、创建的控制器中依然需要$http向后台请求数据
3、php中二维数据的遍历用的是foreach
4、php中$arr=array()，$arr[] 可以被自动补充所缺失的索引
5、在ng-repeat中，如果数据相同的话会报错（ngRepeat:dupes），解决办法是后面添加track by $index===》list in lists track by $index
基本使用
html
<!DOCTYPE html> <html lang="en" ng-app="Music"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,ol,li{ margin: 0; padding: 0; } .wrap{ width: 400px; margin: 50px auto; } nav{ display: flex; height: 40px; border: 1px solid #000; } nav a{ flex: 1; height: 40px; text-decoration: none; color: #000; text-align: center; line-height: 40px; position: relative; } nav a:after{ content: ''; width: 0; height: 35px; border-left: 1px solid #000; position: absolute; top: 2.5px; right: 0; } nav a:last-child:after{ visibility: hidden; } ol{ border: 1px solid #000; border-top: none; min-height: 300px; padding-left: 40px; } ol li{ line-height: 40px; } </style> </head> <body> <div class="wrap" ng-controller="IndexController"> <nav> <a href="#/1">摇滚</a> <a href="#/2">民族</a> <a href="#/3">民谣</a> <a href="#/4">公路</a> </nav> <ol> <div ng-view=""></div> </ol> </div> <script src="../libs/angular.min.js"></script> <script src="../libs/angular-route.js"></script> <script> var Music=angular.module('Music',['ngRoute']); Music.config(['$routeProvider',function ($routeProvider) { $routeProvider.when('/:id',{ templateUrl:'./list.html', controller:'IndexController' }).otherwise({ redirectTo:'/1' }); }]); Music.controller('IndexController',['$scope','$http','$routeParams',function ($scope,$http,$routeParams) { var type=$routeParams.id; $http({ url:'./music.php', method:'get', params:{id:type} }).success(function (info) { $scope.lists=info; }); }]); </script> </body> </html>
模板页
<li ng-repeat="list in lists track by $index">{{list.text}}</li>
php
<?php $pid=$_GET['id']; $list = array( array('id'=>1, 'pid'=>2, 'text'=>'我很丑可是我很温柔'), array('id'=>2, 'pid'=>2, 'text'=>'浦公英的约定'), array('id'=>3, 'pid'=>2, 'text'=>'你我的约定'), array('id'=>4, 'pid'=>3, 'text'=>'pretty boy'), array('id'=>5, 'pid'=>3, 'text'=>'See You Again'), array('id'=>6, 'pid'=>2, 'text'=>'甜甜的'), array('id'=>7, 'pid'=>1, 'text'=>'再见 我的爱人'), array('id'=>8, 'pid'=>2, 'text'=>'心中的日月'), array('id'=>8, 'pid'=>3, 'text'=>'Let It Go'), array('id'=>10, 'pid'=>1, 'text'=>'不要说再见'), array('id'=>11, 'pid'=>3, 'text'=>'Rise'), array('id'=>12, 'pid'=>2, 'text'=>'再见'), array('id'=>13, 'pid'=>1, 'text'=>'追梦人'), array('id'=>14, 'pid'=>2, 'text'=>'不能说的秘密'), array('id'=>15, 'pid'=>4, 'text'=>'고속도로 로맨스'), array('id'=>16, 'pid'=>1, 'text'=>'昨日重现'), array('id'=>17, 'pid'=>3, 'text'=>'Love Me Like You Do'), array('id'=>18, 'pid'=>2, 'text'=>'好久不见'), array('id'=>19, 'pid'=>1, 'text'=>'独角戏'), array('id'=>20, 'pid'=>2, 'text'=>'K歌之王'), array('id'=>21, 'pid'=>1, 'text'=>'往事随风'), array('id'=>22, 'pid'=>2, 'text'=>'光辉岁月'), array('id'=>23, 'pid'=>3, 'text'=>'Just Like Fire'), array('id'=>24, 'pid'=>4, 'text'=>'涙の物语'), array('id'=>25, 'pid'=>4, 'text'=>'江南Style'), array('id'=>26, 'pid'=>4, 'text'=>'ガラガラ'), array('id'=>27, 'pid'=>1, 'text'=>'海阔天空'), array('id'=>28, 'pid'=>4, 'text'=>'天空之城'), array('id'=>29, 'pid'=>4, 'text'=>'사랑이었다'), array('id'=>30, 'pid'=>3, 'text'=>' Good Time'), array('id'=>31, 'pid'=>1, 'text'=>'不再犹豫'), array('id'=>32, 'pid'=>4, 'text'=>'さよならの夏 ～コクリコ坂から～'), array('id'=>33, 'pid'=>3, 'text'=>' Heart And Soul'), array('id'=>34, 'pid'=>4, 'text'=>'넘버나인 '), array('id'=>35, 'pid'=>1, 'text'=>'往事只能回味'), array('id'=>36, 'pid'=>3, 'text'=>'Bang Bang'), array('id'=>37, 'pid'=>4, 'text'=>'君が好きだと叫びたい'), array('id'=>38, 'pid'=>3, 'text'=>'Same Old Love'), array('id'=>39, 'pid'=>4, 'text'=>'君をのせて'), array('id'=>40, 'pid'=>1, 'text'=>'恋恋风尘') ); $result=array(); foreach($list as $key=>$value){ if($value['pid']==$pid){ $result[]=$value; } } echo json_encode($result); // $arr=array(); // $arr[]='a'; // $arr[]='b'; ?>
