0

我在 Angular 中介绍了它的教程“Phonecat”。针对本教程，我想构建一个简单的应用程序，其中包含只有一个 json 的列表和详细视图，包含所有信息。

列表视图（显示 json 的完整内容）工作正常，但我很难为详细视图设置我的 Angular 服务。我正在使用 XHR 方法：

控制器.js：

function PlaygroundDetailCtrl($scope, Playground) {
  $scope.playgrounds = Playground.query();
}

服务.js

angular.module('playgroundcatServices', ['ngResource']).
    factory('Playground', function($resource){
  return $resource('playgrounds/playgrounds.json', {}, {
    query: {method:'GET', isArray:true}
  });
});

游乐场.json

 [ 
   { 
     "id:" 1,
     "properties": "true"
     "lat": "51.347789"
     "lon": "12.232234"
   },
   {
     "id:" 2,
     "properties": "false"
     "lat": "51.347789"
     "lon": "12.766667"
   }
]

我希望 Angular 只显示一个条目 (id:1) 及其属性。最聪明的方法是什么：再次显示然后过滤？

我难住了。

4

3 回答 3

2

在您的视图上使用 Angular过滤器（无需过滤服务上的数据）：

<div ng-repeat="entry in playgrounds | filter:{id: 1}">
    <p>properties: {{entry.properties}}</p>
    <p>lat: {{entry.lat}}</p>
    <p>lon: {{entry.lon}}</p>
</div>

jsfiddle：http: //jsfiddle.net/bmleite/Ad6u9/

于 2013-02-13T16:23:28.590 回答
1

结果非常好：

控制器：

function PlaygroundDetailCtrl($scope, $routeParams, $http) {
    $http.get('playgrounds/playgrounds.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.playgroundId) 
            $scope.playground = item;
        });
    });
于 2013-02-15T22:09:30.920 回答
0

我现在有完全相同的场景我想（我猜你正在开发'移动'（就像我一样并且想要最小化数据传输） - 我正在使用一个'主 json 文件'，并且然后在我的详细视图中，只需在 ID 值上过滤该 json 文件（以便不必重新加载 json）。

这完全未经测试，但您的原始问题中的代码应修改如下：

angular.module('playgroundcatServices', ['ngResource'])
.factory('Playground', function($resource){
    return $resource('playgrounds/playgrounds.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

function PlaygroundDetailCtrl($scope, Playground) {
  Playground.query(
    // params (none in this case)
    {},
    // Success
    function (data) {
        $scope.playgrounds = data.filter(function (o) {
            return o.id == $routeParams.playgroundId; // assuming you've set this up in your routes definition
        })[0];
    },
    // Error
    function (data) {
        //error handling goes here
    }
  );
}

您可能还想$scope.isDataLoaded = true;在“成功”处理程序中添加类似的内容，并对其进行监视，以检查数据何时完成加载（例如，在指令中）。

我对里面的内容不是很满意[0]，但它认为解决方案比forEach我自己的循环更好。

于 2013-04-29T09:20:47.750 回答