Question

让我解释一下我的情况：我有一个包含电影的列表视图。所有这些电影都包含和movieId。当我点击列表视图中的电影时，我想重定向到该电影的详细页面。我已经尝试了很多东西，但我似乎没有使用正确的方法。这就是我提问的原因。

app.js

var app = angular.module('ionicApp', ['ionic'])

app.config(function ($stateProvider, $urlRouterProvider) {


    $stateProvider
      .state('search', {
          url: '/search',
          templateUrl: 'search.html'
      })
      .state('settings', {
          url: '/settings',
          templateUrl: 'settings.html'
      })
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "tabs.html"
      })

      .state('tabs.home', {
          url: "/home",
          views: {
              'home-tab': {
                  templateUrl: "home.html",
                  controller: 'HomeTabCtrl'
              }
          }
      })

         .state('tabs.movies', {
             url: "/movies",
             views: {
                 'home-tab': {
                     templateUrl: "partials/movies.html"
                 }
             }
         })

        .state('tabs.movies.details', {
            url: "/movies/:id",


            views: {
                'home-tab': {
                    templateUrl: "partials/movieDetails.html"
                }
            }
        })

      .state('tabs.login', {
          url: "/login",
          views: {
              'home-tab': {
                  templateUrl: "partials/login.html"
              }
          }
      })
        .state('tabs.logout', {
            url: "/logout",
            views: {
                'home-tab': {
                    templateUrl: "partials/logout.html"
                }
            }
        })
      .state('tabs.facts2', {
          url: "/facts2",
          views: {
              'home-tab': {
                  templateUrl: "facts2.html"
              }
          }
      })
      .state('tabs.about', {
          url: "/about",
          views: {
              'about-tab': {
                  templateUrl: "about.html"
              }
          }
      })
      .state('tabs.navstack', {
          url: "/navstack",
          views: {
              'about-tab': {
                  templateUrl: "nav-stack.html"
              }
          }
      })
      .state('tabs.contact', {
          url: "/contact",
          views: {
              'contact-tab': {
                  templateUrl: "contact.html"
              }
          }
      });


    $urlRouterProvider.otherwise("/tab/home");

});

movies.html

<ion-view title="Movies">
    <ion-content>
        <ion-list ng-controller="MovieCtrl" ng-init="get()">
            <ion-item ng-repeat="item in items">
                <a href="#/tab/movies/{{item.movieId}}">
                    <h2>{{item.movieTitle}}</h2>
                    <p>{{item.movieDescription}}</p>
                </a>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

MovieDetails.html

<ion-view title="Movie details">
    <ion-content>
        <div>
            <h2>{{item.movieTitle}}</h2>
            <p>{{item.movieId}}</p>
            <p>{{item.movieDescription}}</p>
        </div>              
    </ion-content>
</ion-view>

MovieCtrl.js

app.controller('MoviesCtrl', function ($scope, $http) {
    $scope.get = function () {
        $http({ method: 'GET', url: 'http://xxx.xxx.xx/api/movies' }).success(function (data) {
            $scope.items = data;
        });
    };

});

单击列表项后，页面将指向“电影”详细信息，但它显示空白页面。我希望这个领域充满了。

我希望我解释清楚。如果不是这样，请告诉我，以便我可以编辑这篇文章！

谢谢！

Answer 1

我认为你错过了一点。您将结果设置为$scope items，但在视图中使用item。如果您希望收到更多结果，则应使用ng-repeat，否则，将其重命名为$scope.item，您应该会看到结果。要与ng-repeat一起使用，您需要将div更改为以下

<div ng-repeat="item in items">
  <h2>{{item.movieTitle}}</h2>
  <p>{{item.movieId}}</p>
  <p>{{item.movieDescription}}</p>
</div>

Cordova angularJS列表项单击，重定向到列表项详细信息页面

1 个答案: