如何在ionic中使用$http获取特定的用户内容

how to get particular user content using $http in ionic

本文关键字：获取 用户 http ionic      更新时间：2024-06-30

我是离子的新手。我已经用rest调用成功地填充了用户列表。我想使用$http方法为用户获取特定的数据。但我做不到。这是我的代码。

services.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;
      }
    }
  }]);

控制器.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的模板，该模板显示用户数据。

我认为问题在于无法删除用户。之所以会发生这种情况，是因为您不是从users数组（在response.data中）中删除，而是从响应本身（出于某种原因，您将其存储在用户变量中）中移除。

以下是应该对您有所帮助的东西：

这是你的服务

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

此外，我没有重命名任何东西，所以你会理解我修改了什么，但这里有一些你可能想做的修改：

  • 将内容重命名为类似"userService"的内容
  • 到处使用camelCase（控制器名称除外）
  • 要更多地关注变量名（或$scope属性），因为实际上包含用户的内容并不是很好

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

相关文章：