Question

这是我第一次尝试使用angularjs和ionic-framework。

我有一个示例json文件，我想在屏幕上显示一些数据。显示数据位有效，但我想填充一个＆＃34;详细信息＆＃34;在主json文件中存储为abject的一些信息的页面，我需要使用url中的id来选择仅显示我需要的数据。

这里有一些代码：

App.js

angular.module('hgapp', ['ionic', 'hgapp.controllers', 'ngResource'])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'AppCtrl'
        })
        .state('app.details', {
            url: '/details/:roomID',
            views: {
                'menuContent': {
                    templateUrl: 'templates/details.html',
                    controller: 'DetailsCtrl'
                }
            }
        })
    $urlRouterProvider.otherwise('/app/home');
});

Controllers.js

angular.module('hgapp.controllers', ['hgapp.services'])

.controller('AppCtrl', function ($scope, HGJson) {
    HGJson.get(function (data) {
        $scope.rooms = data.data;
    })
})

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    $scope.roomID = $stateParams.roomID;
    console.log($stateParams.roomID);
})

services.js

angular.module('hgapp.services', ['ngResource'])
.factory('HGJson', function ($resource) {
    return $resource('json/data.json')
});

Data.json（只是一个简单的例子）

{
   tm: 00000000,
   errors: 0,
   data: {
       {id: 0, name: Value 0, url:url-0},
       {id: 1, name: Value 1, url:url-1},
       {id: 2, name: Value 2, url:url-2}
}

details.html

<ion-view view-title="Details">
<ion-content>
    <h1>{{roomID}}</h1>
</ion-content>

在详细信息页面中，我打印roomID只是为了查看控制器（detailsCtrl）是否有效，并且每次都打印正确的ID。现在，我所困扰的是如何操纵HGJson服务中的数据，以便它允许我打印来自正确房间ID的数据。

我希望这个问题是明确的，如果没有，请随时要求进一步澄清。

非常感谢

修改

最后我解决了将它添加到我的controller.js文件：

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    HGJson.get(function (data) {
        angular.forEach(data.data, function (item) {
            if (item.id == $stateParams.roomID)
                $scope.currentRoom = item;
        });
    });
})

Angularjs - 在json文件中读取

0 个答案: