Angular js - 如何从位于我的服务器中的 json 文件中提取部分数据以获取传递参数的详细视图？

Question

我是Angular的新手。我想这是一个简单的问题。我有一个 json 文件，其中包含托管在我的服务器中的不同对象。我得到了显示每个对象的列表。现在，当我单击每个列表项（对象）时，我想在详细视图（不同于列表视图）中显示每个项的详细信息。我知道如何使用参数 (id) 重定向到此详细信息视图，但我不知道如何呈现该特定对象的详细信息。在这里我展示我的代码：

data.json

[
{
"id": "1",
"name": "james", 
"age": "20",
"city": "NY"
},
{
"id": "2",
"name": "allan", 
"age": "21",
"city": "London"
},
{
"id": "3",
"name": "thomas", 
"age": "22",
"city": "Belfast"
}
]

app.js

angular.module("myApp", ["controllers", "services", "directives", "ngRoute"]);
angular.module("myApp").config(function($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl : 'templates/home.html',
        controller  : 'HomeCtrl'
    })
    .when('/list', {
        templateUrl : 'templates/list.html',
        controller  : 'ListCtrl'
    })
    .when('/list/:id', {
        templateUrl: 'templates/item.html',
        controller: 'ItemCtrl'
    })
    .otherwise({redirectTo: '/'}); 
});

controllers.js

...
.controller('ListCtrl',function($scope, MyService) {
$scope.list = {};
MyService.getData()
    .then( function(result) {                                  
            $scope.list=result.data;
            })
    .catch( function(error) { 
            console.log('There is an error.', error); 
            }); 
})
.controller('ItemCtrl',function($scope, $routeParams, MyService, $location) {
var id = $scope.id = $routeParams.id;
$scope.item = {};
MyService.getData()
    .then( function(result) { 
            $scope.item=result.data;
                if(id) {
                    return result.data[id]
                }
            })
    .catch( function(error) { 
            console.log('There is an error.', error); 
            });   
})

service.js

...
.factory('MyService', function($http) {     
return  { getData: getData };
function getData() {
    return $http.get('data.json'); 
}
})

item.html

<div ng-controller="ItemCtrl">
    <p>{{item.name}}</p>
    <p>{{item.city}}</p>
</div>

有什么建议吗？

提前致谢！

Answer 1

您可以使用您的服务加载对象列表，并将它们保存在服务内的变量中，这样您就不会每次都调用该服务（以获取 json 文件），除非您需要每次都获取最新数据。

如果您对以下代码有疑问，请检查 plunkr：https://plnkr.co/edit/1k3RhxIWnsdY7rPViRhK?p=preview

在你的服务中你可以做到这一点

...
.factory('MyService', function($http, $q, $filter) {     

    var itemList = [];
    var self = {};

    self.getList = getList;
    self.getItem = getItem;

    return self;

    function getList(){
        var defer = $q.defer();

        $http.get('data.json').then(function(response){
            itemList = response.data;
            defer.resolve(itemList); // you can do data manipulation here if you need to
        },function(error){
           defer.reject(error); //you can customize your error
        });

        return defer.promise;
    }

    function getItem(itemId){
       if(itemList){
           var found = $filter('filter')(itemList, {id:itemId}, true);

           return found[0]; //the [0] is to get the first item since found is an array
       }
    }
})

您可以在控制器加载到您的路由之前在列表控制器中加载数据（项目）。确保在控制器中注入 "items"。

angular.module("myApp").config(function($routeProvider) {
    $routeProvider
        .when('/list', {
        templateUrl: 'templates/list.html',
        controller: 'ListCtrl',
        resolve: {
            items: function(MyService){
                MyService.getList().then(function(response){
                  return response
                });
            }
        }
    })
  .
  ...Other Routes Here...
  .otherwise({redirectTo: '/'});

});

现在您可以在您的物品控制器中执行此操作

.controller('ItemCtrl',function($scope, $routeParams, MyService) {
    var id = $routeParams.id;

    $scope.item = MyService.getItem(id);

})

Angular js - 如何从位于我的服务器中的 json 文件中提取部分数据以获取传递参数的详细视图？

Angular js - How to extract partial data from json file located in my server for a detail view passing a parameter?

json

http

detailsview

angularjs