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

您可以在控制器加载路线之前在列表控制器中加载数据（项目）。确保注入＆＃34;项目＆＃34;在你的控制器中。

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文件中提取部分数据，以获取传递参数的详细视图？

1 个答案: