Question

朋友们，我是角色新手，想要开发单页应用程序。为此我创建了一个服务来调用工作正常的数据，并为show user list创建一个控制器。使用路由时遇到问题。我希望当用户点击列表页面中的任何选项卡时，用户将登陆到详细页面，其中包含在列表页面中单击的用户的详细信息...请检查下面的代码

使用此代码userData.userslist(...).find is not a function

在控制台中获取此错误

controller.js

var myApp = angular.module('assignment', ['ngRoute']);

myApp.service('userData', ['$http', function($http){
  return{
    userslist : function(){
        return $http({'url' : 'js/data.json', 'method' : 'GET'}).then(function(response){
        return response.data;
      }, function(data){
        console.log('some error')
      })
    }
  }
}]);


  myApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'user-list.html',
            controller: 'users'
          }).
          when('/:username', {
            templateUrl: 'detail.html',
            controller: 'userdetail'
          }).
          otherwise({
            redirectTo: '/'
          });
      });



myApp.controller('users', ['$scope', '$http', 'userData', function($scope, $http, userData){
  userData.userslist().then(function(data){
    $scope.items = [];


    angular.forEach(data.data.bst_users, function(item){
                   $scope.items.push(item);

               })

  })
}]);



/*>>>>>Problem is here<<<<<<*/

myApp.controller('userdetail', ['$scope', '$routeParams', 'userData', function($scope, $routeParams, userData){
console.log($routeParams.username);

userData.find($routeParams.username, function(found){

    $scope.user = found;
})

console.log(scope.user)

}])


/*******Filters*******/

myApp.filter('removeSpace',function() {
    return function(input) {
        if (input) {
            return input.replace(/\s+/g, '-');    
        }
    }
});

Answer 1

该服务没有任何以用户名作为输入参数的方法find()。目前，服务将列表返回为userlist()

可能需要再次进行显式调用才能获取用户列表，然后按用户名对其进行过滤。

myApp.controller('userdetail', ['$scope', '$routeParams', 'userData', function($scope, $routeParams, userData){

  console.log($routeParams.username);

  userData.userslist().then(function(data){
     $scope.items = [];
     angular.forEach(data.data.bst_users, function(item){
       $scope.items.push(item);

       //Find User here
       if(item.username == $routeParams.username) {
          $scope.user = item;
       };

     });
  });
}]);

或者，在更改路线时，您可以将$scope.items存储在ng-cookies中并在控制器中获取此列表以按用户名进行过滤。

在angular中使用$ routeParams进行路由

1 个答案: