如何通过单击列表从json获取特定id的包含

controller.js

.controller('FeedCtrl', function($scope, $http) {
var path = 'data/data.json';
var conditions = $http.get(path).then(function(resp) {
// $http.get('https://api.myjson.com/bins/147ny').then(function(resp) {
$scope.conditions = resp.data.employees ;  

}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})

.controller('FeedDetailCtrl', function($scope, $stateParams ) {
 $scope.condition = conditions.get($stateParams.feedId);
 })
 });

app.js

    .state('tab.feed', {
url: '/feed',
views: {
  'tab-feed': {
    templateUrl: 'templates/tab-feed.html',
    controller: 'FeedCtrl'
  }
  }
  })

  .state('tab.feed-detail', {
  url: '/feed/:feedId',
  views: {
    'tab-feed': {
      templateUrl: 'templates/feed-detail.html',
      controller: 'FeedDetailCtrl'
    }
   }
   })
   ;

tab-feed.html

   <ion-view view-title="Chats">
   <ion-content >
   <ion-list>
   <ion-item class="item-remove-animate item-avatar item-icon-right"     
     ng-repeat="condition in conditions" type="item-text-wrap"   
     href="#/tab/feed/{{condition.id}}">

    <h2>{{condition.firstName}}</h2>
    <p>{{condition.lastName}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>


    </ion-item>
    </ion-list>
     </ion-content>
     </ion-view>

feed-detail.html

     <ion-view view-title="{{condition.firstName}}">
     <ion-content class="padding">


     <p class="font-color">


     {{condition.lastName}}

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

What i want is once i click on any of the option from the list and the next page should display the data available in the json file which belongs to the specific id.Thank you.

我想要的是一旦我点击列表中的任何选项,下一页应该显示属于特定id的json文件中的可用数据。谢谢。

1 个解决方案

#1

I recommend you follow the lesson Passing Data Between Controller from appcamp.io.

我建议您按照从appcamp.io传递控制器之间的数据课程。

Also see next solution on play.ionic.io

另请参阅play.ionic.io上的下一个解决方案

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script id="templates/page1.html" type="text/ng-template">
      <ion-view view-title="Page 1">
    <ion-content>
      <h1>Page 1</h1>

      <form ng-submit="submitForm(user)">
       <ion-list>
         <ion-item class="item-input">
           <input type="text" ng-model="user.firstName" placeholder="First Name">
         </ion-item>
         <ion-item class="item-input">
           <input type="text" ng-model="user.lastName" placeholder="Last Name">
         </ion-item>
         <ion-item class="item-input">
           <textarea ng-model="user.comments" placeholder="Comments"></textarea>
         </ion-item>
         <input type="submit" class="button button-block button-positive" value="Submit">
       </ion-list>
      </form>
    </ion-content>
      </ion-view>
    </script>

    <script id="templates/page2.html" type="text/ng-template">
      <ion-view view-title="Page 2">
    <ion-content>
      <h1>Page 2</h1>

      <ion-list>
        <ion-item>First Name: {{user.firstName}}</ion-item>
        <ion-item>Last Name: {{user.lastName}}</ion-item>
        <ion-item>Comments: {{user.comments}}</ion-item>
      </ion-list>
    </ion-content>
      </ion-view>
    </script>

  </body>
</html>

app.js

angular.module('app', ['ionic'])

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

  $stateProvider
    .state('page1', {
      url: "/page1",
      templateUrl: "templates/page1.html",
      controller: "Page1Ctrl"
    })
    .state('page2', {
      url: "/page2",
      templateUrl: "templates/page2.html",
      controller: "Page2Ctrl"
    });

  $urlRouterProvider.otherwise("/page1");
})

.controller('Page1Ctrl', function($scope, $state, formData) {
  $scope.user = {};

 $scope.submitForm = function(user) {
   if (user.firstName && user.lastName && user.comments) {
     console.log("Submitting Form", user);
formData.updateForm(user);
   console.log("Retrieving form from service", formData.getForm());
   $state.go('page2');
   } else {
     alert("Please fill out some information for the user");
   }
 };

})

.controller('Page2Ctrl', function($scope, formData) {
$scope.user = formData.getForm();
})

.service('formData', function() {
 return {
   form: {},
   getForm: function() {
     return this.form;
   },
   updateForm: function(form) {
     this.form = form;
   }
 }
})

#1