Question

我在详细信息页面中获取特定数组时遇到问题。 $ stateParams需要与JSON数组ID相同，但我无法在其模板上打印它。我非常感谢任何帮助。谢谢。

服务

angular.module('demo', ['ui.router']);
.factory('BookService', ['$http', function($http){
  return {list: $http.get('data.json')}
}])

路线

.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/books');
    $stateProvider
        .state('books', {
            url:'/books',
            templateUrl: 'templates/books.html',
            controller: 'BooksCtrl'
        })
        .state('books.detail', {
            url: '/detail/:id',
            templateUrl: 'templates/books-detail.html',
            controller: 'BooksDetailCtrl'
        });
}])

控制器

.controller('BooksCtrl', ['$scope', 'BookService', function($scope, BookService){
  BookService.list
    .success(function(data){
        $scope.books = data;
    });
}])
.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'BookService',
function($scope, $stateParams, BookService){
    $scope.selectedBook = BookService.find(BookService.list, $stateParams.id);
}])

JSON文件（data.json）

    {   "demo_site": [{
            "id": "1",
            "title": "Demo 1",
            "summary": "Summary 1",
            "body": "test demo 1",
            "image": "img/compress/placehold.jpg",
            "source": "angular/source",
            "demo_link": "http://github.com"
        }, {
            "id": "2",
            "title": "Demo 2",
            "summary": "Summary 2",
            "body": "test demo 2",
            "image": "img/compress/placehold.jpg",
            "source": "angular/source",
            "demo_link": "http://github.com"
        }]
}

模板 books.html

<ul>
  <li ui-sref-action="selected" ng-repeat="book in books.demo_site">
    <a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
  </li>
</ul>

<div class="detail" ui-view></div>

书籍-detail.html

<div>
    {{selectedBook.title}}
</div>

Answer 1

我已经对您的代码进行了一些编辑，现在可以使用了。最重要的变化是通过bookServiceMock模拟BookService（我添加了它因为我无法访问您的服务）。

app.js

var app = angular.module('demo', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/books');
    $stateProvider
        .state('books', {
            url:'/books',
            templateUrl: 'books.html',
            controller: 'BooksCtrl'
        })
        .state('books.detail', {
            url: '/detail/:id',
            templateUrl: 'books-detail.html',
            controller: 'BooksDetailCtrl'
        });
}]);

app.service('bookServiceMock', function() {
  var books =[{
            "id": "1",
            "title": "Demo 1",
            "summary": "Summary 1",
            "body": "test demo 1",
            "image": "img/compress/placehold.jpg",
            "source": "angular/source",
            "demo_link": "http://github.com"
        }, {
            "id": "2",
            "title": "Demo 2",
            "summary": "Summary 2",
            "body": "test demo 2",
            "image": "img/compress/placehold.jpg",
            "source": "angular/source",
            "demo_link": "http://github.com"
        }];

  this.getBooks = function() {
    return books;
  };

  this.getBook = function(id) {
    for (var i = 0; i < books.length; i++) {
      if (books[i].id === id) {
        return books[i];
      }
    }
    return null;
  }
})

app.controller('BooksCtrl', ['$scope', 'bookServiceMock',  function($scope, bookServiceMock){
    console.log('BooksCtrl');
        $scope.books =  bookServiceMock.getBooks();
}]);

app.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'bookServiceMock',
function($scope, $stateParams, bookServiceMock){
  $scope.selectedBook = bookServiceMock.getBook($stateParams.id);
}]);

books.html

<ul>
  <li ui-sref-action="selected" ng-repeat="book in books">
    <a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
  </li>
</ul>

<div class="detail" ui-view></div>

以下是plunkr：http://plnkr.co/edit/VJxlqguJZGrIutAFLCNc

获取等于$ stateParam值的Json数组

1 个答案: