Question

此处的表格包含书籍详细信息，其中包含书名，作者，pric，ISBN和类别。当用户单击Book Name时，它应该使用querystring

将数据传递到另一个页面

    <script type="text/javascript" src="book.js">
    <body ng-app="mymodule" >
    <div ng-controller="myController" >
          <table border=2>
            <thead>
            <tr>
              <th>ISBN</th>
              <th>NAME</th>
              <th>AUTHOR</th>
              <th>CATEGORY</th>
              <th>PRICE</th>
            </tr>
            </thead>
            <tbody>
              <tr ng-repeat="book in books">
                <td>{{ book.ISBN }}</td>
                <td ><a href="" ng-click="getdetail(book)">{{ book.Name }}</a></td>
                <td>{{ book.Author }}</td>
                <td>{{ book.Category }}</td>
                <td>{{ book.price }}</td>
                </tr>
            </tbody>
        </table>

    books.js        
    var myapp = angular.module('mymodule', []);
     myapp.controller("myController", function($scope, $http,$window) {
      $http.get("https://api.myjson.com/bins/p4ujn").then(function(response) {
            $scope.books = response.data;
            $scope.getdetail=function(){
              $scope.getbookdetail=this.book;
              $window.location.href = "orderpage.html";     
            }
      }); 
    });
    orderpage.html
    <script type="text/javascript" src="book.js"></script>
    <body ng-app="mymodule" >
      <div ng-controller="myController" >
          {{getbookdetail.Name}}<br>
          {{getbookdetail.Author}}
          {{getbookdetail.price }}<br>
        </div>
    </body

Answer 1

所以你这样说：＆＃39;当用户点击Book Book时，它应该使用querystring将数据传递到另一个页面＆＃39;

Querystring不是用于此类事情的最佳方法。您最好不要了解ui-router并设置处理此问题的路线。您拥有初始状态，然后您可以创建另一个状态来显示每本书。像这样：

.state('initial', {
  url: 'some/initial',
  template: 'some/initial/template.html',
  params: {
    name: null,
    price: null,
    author: null,
    isbn: null,
    category: null
  }
})
.state('read-book-details', {
  parent: 'initial',
  url: 'some/url',
  template: 'some/template.html',
  params: {
    name: null,
    price: null,
    author: null,
    isbn: null,
    category: null
  }
})

然后，当你从一个州“过渡”时另一方面，你这样做就像传递你想要的参数一样：

$state.go('read-book-details',
  { name: book.name, price: book.price, author: book.author });

在＆＃39;其他＆＃39;页面的控制器（即＆＃39; read-book-details＆＃39;状态的控制器）你可以注入$ state并获取通过$ state.params传递的参数（即，$ state .params.price）

您的第二个选择是拥有一个可以存储数据的服务，然后从其他任何地方检索。当您开始传递大量数据而不是更简单的小块（如名称，价格）时，这显然会变得有用。

如何将json数据传递到查询字符串并在另一个页面中使用该数据

1 个答案: