Question

我是离子的新手。我已经通过休息呼叫成功填充了用户列表。我想使用$ http方法获取用户特定数据。但是我无法做到。我的代码也是。

service.js

angular.module('starter.service',[]).
  factory('Contents',['$http',function($http){
    var users = [];

    return {
      get: function(){
        return $http.get("http://jsonplaceholder.typicode.com/users").then(function(response){
          users = response;
          return users;
        });
      },
      remove:function(content){
        users.splice(users.indexOf(content),1);
      },
      getUser:function(chatId)
      {
        console.log('inside service');
        for(var i=0; i<users.length;i++){
          if(users[i].id === parseInt(chatId)){
            return users[i];

          }
        }
        return null;
      }
    }
  }]);

controller.js

angular.module('starter.controller', [])


  .controller('ChatCtrl', function($scope, Contents,$ionicModal) {
     console.log('inside controller');
    Contents.get().then(function(users){
      //users is an array of user objects
      $scope.contents=users.data;
      console.log($scope.contents);
    });
      $scope.remove = function(content) {
      Contents.remove(content);

    };

  })
  .controller('ChatDetailCtrl', function($scope, $stateParams, Contents) {
    console.log('details');



$scope.content = Contents.getUser($stateParams.chatId);

    console.log($stateParams.chatId);
    console.log($scope.content)
});

chat.html：

<ion-view view-title="Chats">

  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents" type="item-text-wrap" >
          <img  ng-src="{{content.image}}" style="width:50px; height:50px;" ng-click="showUser(content)">
        <a href="#/tab/chats/{{content.id}}" class="subdued">
        <h2>{{content.name}}</h2>
          <i class="icon ion-chevron-right icon-accessory"></i>
          <ion-option-button class="button-assertive" ng-click="remove(content)">
            Delete
          </ion-option-button>
</a>
       </ion-item>

      </ion-list>

  </ion-content>
</ion-view>

此chat.html重定向到另一个名为chat-detail.html的模板，该模板显示用户数据。

Answer 1

我认为问题在于您无法删除用户。这种情况正在发生，因为您没有从users数组（在response.data中）中删除，而是从响应本身（由于某种原因存储在users变量中）中删除。

这可以帮到你：

这是您的服务

angular.module('starter.service', [])
  .factory('Contents', ['$http', function($http) {
    var users = [];

    return {
      get: function(){
        return $http.get("http://jsonplaceholder.typicode.com/users")
          .then(function(response) {
            users = response.data;
            return users;
          });
      },
      ...
  }]);

这在你的控制器中

angular.module('starter.controller', [])  
  .controller('ChatCtrl', function($scope, Contents, $ionicModal) {
    console.log('inside controller');
    Contents.get().then(function(users){
      //users is an array of user objects
      $scope.contents = users;
      console.log($scope.contents);
    });

    $scope.remove = function(content) {
      Contents.remove(content);
    };
  })
  .controller('ChatDetailCtrl', function($scope, $stateParams, Contents) {
    console.log('details');
    $scope.content = Contents.getUser($stateParams.chatId);

    console.log($stateParams.chatId);
    console.log($scope.content)
  });

此外，我没有重命名任何内容，以便您了解我修改过的内容，但是您可能需要进行一些修改：

将内容重命名为＆＃39; userService＆＃39;
在任何地方使用camelCase（控制器名称除外）
更多关注变量名称（或$ scope属性），因为实际上包含用户的内容实际上并不是很好。

希望这有帮助，如果没有，请告诉我。

如何使用$ http in ionic获取特定用户内容

1 个答案: