如何獲得包含JSON特定ID的通過單擊列表上

controller.js如何獲得包含JSON特定ID的通過單擊列表上

.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' 
    } 
    } 
    }) 
    ;

製表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>

飼料-detail.html

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


    <p class="font-color"> 


    {{condition.lastName}} 

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

我想要的是一旦我點擊列表中的任何選項，下一頁應該顯示json文件中可用的屬於特定id的數據。謝謝。

來源

2015-10-02 mathan

您好，歡迎。你能解釋一下目前發生了什麼嗎？有沒有錯誤信息？確切的問題是什麼？ – wwkudu

這可能會幫助你http://stackoverflow.com/questions/11923142/how-to-filter-json-data-with-angularjs –

錯誤：[ng：areq]參數'FeedDetailCtrl'不是一個函數，得到了undefined – mathan

我建議您從appcamp.io開始，按照課程Passing Data Between Controller。

也可參閱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; 
    } 
} 
})

來源

2015-10-02 09:40:01

如何獲得包含JSON特定ID的通過單擊列表上

回答

相關問題