Question

我在Ionic中构建应用程序，我需要显示从列表到详细信息的几个内容。基本上我有一个主页，显示来自json文件的所有内容，并将其放入列表

home.html的

<ion-view view-title="Home">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="item in items" ui-sref="item({itemId:item.id})">
          <div class='card'>
            <div class="item item-divider">
              {{item.title}}
            </div>
            <div class="item item-text-wrap">
              {{item.text}}
            </div>
            <div class="item item-divider">
              {{item.id}}
            </div>
          </div>
      </ion-item>
    </ion-list>


  </ion-content>
</ion-view>

控制器显示home.html中的所有项目

//factory to get data from data.json

.factory('myFactory', function($http) {
return $http.get('data.json');
})

//Controller home display the whole list

.controller('HomeCtrl', function($ionicModal, $scope, myFactory) {

 myFactory.then(function(response) {
 $scope.items = response.data;
 /*console.log(response)*/
 });

当我点击列表中的一个元素时，我希望被重定向到匹配ID的特定内容：

item.html

<ion-view view-title="Module">
 <ion-content class="has-header">
  <h1>{{$stateParams.itemId}} (doesn't work)</h1>
   <p>
    <!-- content information from given id... -->
   </p>
 </ion-content>
</ion-view>

单件物品的控制器

.controller('ItemCtrl', function($stateParams) {
 console.log($stateParams.itemId);
 })

但我甚至无法在我的HTML中显示所选内容的ID！并且无法从该ID中检索任何元素......我现在就迷失了！我已经看到了带有给定参数的state.go，但这不是我想要做的。我尝试分配不同的变量，但无法弄清楚。

我的json文件如下所示：

[
 { "title": "Emploi du temps", "text": "text", "id": 1, "content": "text" },
 { "title": "Agenda/bons plans", "text": "text", "id": 2, "content": "text"},
 { "title": "Transport", "text": "text", "id": 3, "content": "text" },
 { "title": "Sécurité", "text": "text", "id": 4, "content": "text" }
]

国家看起来像这样：

//States

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

  .state('home', {
    url: '/home',
    templateUrl: 'templates/home.html',
    controller: 'HomeCtrl'
  })

  .state('item', {
    url: '/home/:itemId',
    templateUrl: 'templates/item.html',
    controller: 'ItemCtrl'
  })

我已经花了好几天时间和我已经阅读了很多相似的问题，但我似乎无法让它发挥作用......就像我错过了整个事情。我希望我能像我们在PHP中那样做（类似于get * from * ，其中id = *）请帮忙，谢谢：）

Answer 1

在你的代码中有一个错误 -

Actually $stateParams object can not synchronized with our view.
So don't use this for views.

**Solution-**

我们可以使用$ scope并为它附加一个属性，即itemId。 $ scop能够与UI（视图）进行交互。

<强> item.html：

<ion-view view-title="Module">
 <ion-content class="has-header">
  <h1>{{$scope.itemId}}</h1>
   <p>
    <!-- content information from given id... -->
   </p>
 </ion-content>
</ion-view>

单个项目的

控制器：

.controller('ItemCtrl', function($stateParams) {
     $scope.itemId = $stateParams.itemId;
 })

无法在Angular中检索给定ID的参数

1 个答案: