Question

我正在尝试从api中获取电影细节，工作正常，现在我想点击每部电影，并在filmdetail页面上显示点击参数的电影细节。我在api中有“url”，我想用它作为参数我的项目结构如下：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="mainApp">


    <div ng-view></div>
  </body>
</html>

home.html的

<div ng-controller="upcomingFilmsCtrl">
    <ul>
        <li ng-repeat="film in films">
            {{film.filmName + ' ' + film.filmReleaseDate}}
        </li>
    </ul>
</div>

<div ng-controller="filmsInTheatresCtrl">
    <ul>
        <li ng-repeat="film in films">
            <a href="#films/{{film.url}}">{{film.filmName + ' ' + film.filmReleaseDate}}</a>
        </li>
    </ul>
</div>
Hello world <a href="#/filmdetail">films</a>

filmdetail.html

//Individual film details
    <div ng-controller="fillmDetailsCtrl">
            {{filmName}}
            {{filmReleaseDate}}
            {{otherFilmStuf}}

    </div>

controller.js

 var app = angular.module('mainApp', ['ngRoute']);        
     //upcomingFilms Controller
     app.controller('upcomingFilmsCtrl', function($scope, $http){
        $http.get('upcoming-films.php')
        .success(function(response){
            $scope.films = response.upcomingFilms;  
        });

     });

     //filmsInTheatres Controller
     app.controller('filmsInTheatresCtrl', function($scope, $http){
        $http.get('films-in-theatres.php')
        .success(function(response){
            $scope.films = response.filmsInTheatres;    
        });

     });

    //config

    app.config(function($routeProvider){
        $routeProvider
        .when('/', {
            templateUrl: 'home.html'    
        })
        .when('/films', {
            templateUrl: 'filmdetail.html'  
        })
        .otherwise('/anotherPage', {
            redirectTo: '/'
        });

    });

Answer 1

您希望在单击项目时使用$location.search()修改URL中的查询参数。这个方法是一个getter / setter，所以如果你传递一个对象，那些key = value对将被添加为URL查询参数...但是如果你没有传递参数，它会将当前查询参数作为一个对象返回。

使用控制器和路由在AngularJS中单击时每个数据的Url参数

1 个答案: