Update eckig View basierend auf HTTP-Anfrage dynamisch

Question

Ich bin ein Anfänger mit eckigen und ich versuche, eine Sicht auf eine HTTP-Anfrage zu aktualisieren.

$scope.update = function(id){ 
     switch (id) { 
     case 1: 
     $http.get(Backand.getApiUrl() + '/1/objects/details') 
     .then(function(response) { 
      $scope.details = response.data.data[0]; 
      $rootScope.locName = response.data.data[0].locationName; 
      $rootScope.locSubTitle = response.data.data[0].locationSubTitle; 
      $rootScope.locParagraph = response.data.data[0].locationParagraph; 
      $rootScope.locGluten = response.data.data[0].glutenfrei; 
      $rootScope.locRaucher = response.data.data[0].raucher; 
      $rootScope.locGarten = response.data.data[0].garten; 
      $rootScope.locTakeAway = response.data.data[0].takeaway; 
      $rootScope.locRollstuhl = response.data.data[0].rollstuhl; 
      console.log($rootScope.locGluten); 
     }); 
     break; 
      case 2: 
      $http.get(Backand.getApiUrl() + '/1/objects/details') 
      .then(function(response) { 
      $rootScope.locName = response.data.data[1].locationName; 
      $rootScope.locSubTitle = response.data.data[1].locationSubTitle; 
      $rootScope.locParagraph = response.data.data[1].locationParagraph; 
      $rootScope.locGluten = response.data.data[1].glutenfrei; 
      $rootScope.locRaucher = response.data.data[1].raucher; 
      $rootScope.locGarten = response.data.data[1].garten; 
      $rootScope.locTakeAway = response.data.data[1].takeaway; 
      $rootScope.locRollstuhl = response.data.data[1].rollstuhl; 

      }); 
      break; 
     default: 

     } 
    } 


    $scope.goToDetail = function(id) { 
     $state.go("detail") 
     $scope.update(id); 

    } 

HTML

<div ng-repeat="cat in content" class="animated lightSpeedIn"> 
     <a ng-click="goToDetail(cat.id)" nav-transition="none"><div ng-style="{'background': 'url(' + cat.catBgUrl + ')','background-repeat': 'no-repeat','background-size': '100% 100%','display': 'block','width': '100%','height': '25vh' }" class="bgcat center"> 
     <div class="inner"> 
      <h1>{{cat.catName}}</h1> 
      <h4>{{cat.catSubtitle}}</h4> 
      <img src="img/home/open.png" alt=""> 
     </div> 
     </div></a> 
    </div> 

Ich weiß, das ist schlecht Code, aber meine Gedanken waren, dass der Zustand Details gehen und die Funktion Update mit der ID des Eintrags führen. Wechseln Sie dann durch die ID und aktualisieren Sie die Ansicht basierend auf dem angeklickten Element.

Der Code funktioniert gut, aber ich denke, es gibt einen viel besseren Weg, um es zu tun, und ich brauche es dynamisch.

Ich bin wirklich mit diesem fest und möchte es richtig machen. Wie sollte es gemacht werden? Kannst du mir bitte einen Hinweis geben?

Answer 1

for codes relating to data it is better to use services for separation. 

**Your service** 

lassen app Ihr Winkelmodul sein

app.service('detailService',function($http){ 
    var update = function(id,callback){ 
     switch (id) { 
      case 1: 
       $http.get(Backand.getApiUrl() + '/1/objects/details') 
       .then(function(response) { 
        callback(response,0); 
       }); 
      break; 
      case 2: 
       $http.get(Backand.getApiUrl() + '/1/objects/details') 
       .then(function(response) { 
        callback(response,1); 
       }); 
      break; 
    }; 
}); 

**Your controller** 

app.controller('myCtrl',function($scope,$state,detailService){ 
    detailService.update(id,function(response,index){ 
     $scope.response = response; 
     $scope.index = index; 
     $state.go("detail"): 
    }); 
}); 

**You can display the response as** 

<p>Details : {{response.data.data[{{index}}]}}</p> 
<p>Location Name : {{response.data.data[{{index}}].locationName}}</p>