Динамическое обновление углового вида на основе http-запроса

Question

Динамическое обновление углового вида на основе http-запроса

0

Я начинаю с угловатым, и я пытаюсь обновить представление на основе HTTP-запроса.

$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>

Я знаю, что это плохой код, но мои мысли состояли в том, чтобы перейти к сведениям о состоянии и запустить обновление функции с идентификатором записи. Затем перейдите через идентификатор и обновите представление, основанное на щелкнутом элементе.

Код работает нормально, но я думаю, что есть намного лучший способ сделать это, и мне нужно его динамически.

Я действительно застрял в этом и хотел бы сделать это правильно. Как это сделать? Можете ли вы дать мне подсказку, пожалуйста?

olivier 29 июль 2016, в 22:32

Источник

0

пожалуйста, предоставьте объект кошка
Naga Sai A 29 июль 2016, в 20:24
0

кошка является JSON-данными
olivier 29 июль 2016, в 20:25
0

Почему вы обновляете $ rootScope, а не $ scope?
n daniel 29 июль 2016, в 20:31
0

$ scope не работает, потому что ссылается на функцию update (). Я перепробовал все. Моя цель состоит в том, чтобы идентификатор автоматически увеличивался до тех пор, пока cat.is имеет значение в ng-repeat.
olivier 29 июль 2016, в 20:35
0

Вы не можете просто сделать запрос $ http на другом контроллере после изменения маршрутов? Вы можете определить параметры на маршрутах, которые вы будете создавать. и еще одна вещь, избегайте использования $ rootScope
doge1ord 29 июль 2016, в 20:41
0

Как я могу создать параметры? Таким образом, в подробном представлении отображаются правильные данные из огромного объекта json. Я не могу использовать ng repeat и должен показать запись, которая соответствует идентификатору категории.
olivier 29 июль 2016, в 20:45
0

@olivier вы ищете что-то вроде этого - codepen.io/nagasai/pen/YWjVZR
Naga Sai A 29 июль 2016, в 20:54
0

Вы можете передавать параметры при изменении состояния: github.com/angular-ui/ui-router/wiki/…
mzulch 29 июль 2016, в 20:55

Показать ещё 6 комментариев

Теги:

javascript

ionic-framework

angularjs

1 ответ

Ещё вопросы

пожалуйста, предоставьте объект кошка
Почему вы обновляете $ rootScope, а не $ scope?
$ scope не работает, потому что ссылается на функцию update (). Я перепробовал все. Моя цель состоит в том, чтобы идентификатор автоматически увеличивался до тех пор, пока cat.is имеет значение в ng-repeat.
Вы не можете просто сделать запрос $ http на другом контроллере после изменения маршрутов? Вы можете определить параметры на маршрутах, которые вы будете создавать. и еще одна вещь, избегайте использования $ rootScope
Как я могу создать параметры? Таким образом, в подробном представлении отображаются правильные данные из огромного объекта json. Я не могу использовать ng repeat и должен показать запись, которая соответствует идентификатору категории.
@olivier вы ищете что-то вроде этого - codepen.io/nagasai/pen/YWjVZR
Вы можете передавать параметры при изменении состояния: github.com/angular-ui/ui-router/wiki/…

tsadkan yitbarek · Accepted Answer · 2016-07-29T19-46-00.000Z

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

**Your service**

пусть app будет вашим угловым модулем

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>

Большое спасибо, что уже очень помогли! Можете ли вы дать мне подсказку, как я могу увеличить местоположение массива данных? Например, когда идентификатор равен 1, тогда response.data.data [0] .locationName, когда идентификатор равен 2, тогда response.data.data [1] .locationName
Я изменил источник. Не могли бы вы проверить это.