Angularjs

Question

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

我有一个示例 json 文件，我想在屏幕上显示其中的一些数据。显示数据位有效，但我想用一些信息填充 "details" 页面，这些信息作为 abject 存储在主 json 文件中，我需要使用来自 url 到 select 以仅显示我需要的数据。

这是一些代码：

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

Answer 1

只需执行与您在应用程序控制器中所做的相同的操作，但在返回的 JSON:

中找到您想要的房间

HGJson.get(function (data) {
    $scope.room = data.data.filter(function(room) {
      return room.id == $stateParams.roomID);
    })[0];
});

您也可以在您的服务中加入过滤功能，这样将来，当您拥有真正的动态后端时，您可以调用不同的 URL，只返回请求的房间，而不是调用 URL 即 returns 所有房间。

angular.module('hgapp.services')
.factory('HGJson', function ($http) {
    return {
      getRooms: function() {
        return $http.get('json/data.json').then(function(response) {
          return response.data;
        });
      },
      getRoom: function(roomId) {
        return $http.get('json/data.json').then(function(response) {
          return response.data.data.filter(function(room) {
            return room.id == roomID;
          })[0];
        });
      }
    };
});

请注意，您的 JSON 无效：数据必须是数组，而不是对象。

Answer 2

在您的控制器中，您需要创建一个函数来 "find" 数据对象中的正确对象。

尝试这样的事情：

$scope.getRoom = function(id) {
  for(var i in $scope.rooms) {
    if($scope.rooms[i].id === id) {
      return $scope.rooms[i];
    }
  }
};

并且您可以在 DOM:

中显示它

{{ getRoom(roomID) }}

但是每次都将当前房间设置为范围变量而不是运行函数可能会更好。所以在这种情况下（我强烈推荐），而不是返回$scope.rooms[i]，你可以设置angular.copy($scope.rooms[i], $scope.currentRoom)（这会将房间复制到currentRoom作用域变量），然后在 DOM 中简单地使用 {{ currentRoom }}

祝你好运！

Angularjs - 在 json 文件中读取

Angularjs - read inside json file

json

ionic-framework

ionic