Question

我将在Angular中引入其教程“Phonecat”。反对教程，我想构建一个简单的应用程序，其中只有一个json包含所有信息的列表和详细信息视图。

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

Controller.js：

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

Services.js

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

playground.json

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

我希望Angular只显示一个带有属性的条目（id：1）。最聪明的方法是什么：再次显示所有然后过滤？

我很难过。

Answer 1

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

<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/

Answer 2

这非常好：

控制器：

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

Answer 3

我现在有完全相同的情况（我猜你正在考虑'移动'开发（因为我想要最小化数据传输） - 我正在使用一个'主json文件'，然后在我的详细信息视图中，只是过滤该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循环更好。

Angular JS详细视图只有一个json

3 个答案: