цикл for вызывает сбой браузера

Question

как получить доступ к переменной вне области действия http в angularjs

Я хочу сделать раскрывающийся список с множественным выбором, который сначала получит первые 5 данных из JSON, а при нажатии кнопки «Показать больше» получит больше данных из JSON,поэтому я создал счетчик за пределами $ http и хочу обновить его после показа первого набора данных, чтобы я мог использовать его в функции loadMore для продолжения подсчета, но переменная не обновляется.всякий раз, когда я нажимаю «загрузить больше», мой браузер падаетмой код такой:

var counter = 0;
$http({
        method: "GET",
        url: "data.json"
    })
    .then(function onSuccess(response) {
        var innerCounter = counter;
        for (var i = 0; i < 4; i++) {
            $scope.data.push(response.data[i]);
            innerCounter++;
        }
        counter = innerCounter;
        console.log($scope.data);
    })
    .catch(function onError(response) {
        console.log("error");
    });
console.log(counter);

$scope.loadMore = function() {

$http({
    method: "GET",
    url: "data.json"
  })
  .then(function onSuccess(response) {
    var innerCounter = counter;
    for (var i = innerCounter; i < (innerCounter+5); i++) {
      $scope.data.push(response.data[i]);
      innerCounter++;
    }
    counter = innerCounter;

  })
  .catch(function onError(response) {
    console.log("error");
  });

};и мой JSON:

[
{
    "item": "South Korea",
    "category": "Asia",
    "flag": false
},
{
    "item": "England",
    "category": "Europe",
    "flag": false
},
{
    "item": "Japan",
    "category": "Asia",
    "flag": false
},
{
    "item": "Denmark",
    "category": "Europe",
    "flag": false
},
{
    "item": "North Korea",
    "category": "Asia",
    "flag": false
},
{
    "item": "Geramany",
    "category": "Europe",
    "flag": false
},
{
    "item": "China",
    "category": "Asia",
    "flag": false
},
{
    "item": "Spain",
    "category": "Europe",
    "flag": false
},
{
    "item": "India",
    "category": "Asia",
    "flag": false
},
{
    "item": "Italy",
    "category": "Europe",
    "flag": false
},
{
    "item": "Tailand",
    "category": "Asia",
    "flag": false
},
{
    "item": "Portugal",
    "category": "Europe",
    "flag": false
}
]

, и весь мой код выглядит следующим образом.заранее спасибо.

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

  var counter = 0;
  $http({
      method: "GET",
      url: "data.json"
    })
    .then(function onSuccess(response) {
      var innerCounter = counter;
      for (var i = 0; i < 4; i++) {
        $scope.data.push(response.data[i]);
        innerCounter++;
      }
      counter = innerCounter;
      console.log($scope.data);
    })
    .catch(function onError(response) {
      console.log("error");
    });
  console.log(counter);

  $scope.loadMore = function() {

    $http({
        method: "GET",
        url: "data.json"
      })
      .then(function onSuccess(response) {
        var innerCounter = counter;
        for (var i = innerCounter; i < (innerCounter+5); i++) {
          $scope.data.push(response.data[i]);
          innerCounter++;
        }
        counter = innerCounter;

      })
      .catch(function onError(response) {
        console.log("error");
      });

  };

  $scope.selectEnable = false;
  $scope.selectedItems = [];
  $scope.openSelect = function() {
    $scope.selectEnable = !$scope.selectEnable;
  };


  $scope.itemChecked = function(data) {


    var selected = $scope.selectedItems.indexOf(data.item);
    if (selected == -1) {
      $scope.selectedItems.push(data.item);
    } else {
      $scope.selectedItems.splice(selected, 1);
    }
  };


  $scope.filter = function() {
    if (!$scope.searchField) {
      $scope.data2Show = angular.copy($scope.data);
      /* if searchField is empty make a copy of our data */
    } else {

      $scope.data2Show = [];
      $scope.data.map(function(itm) {
        if (itm.item.indexOf($scope.searchField) != -1) {
          $scope.data2Show.push(itm);
        }
      });
    }
  };





  $scope.data2Show = [];
  $scope.data = [];



  //$scope.filter();
});

ul li {
  list-style: none;
  text-align: center;
}

ul {
  height: 100px;
  overflow-y: scroll;
}

#loadMore {
  text-align: center;
  color: #aaa;
  background: #ddd;
  cursor: pointer;
}

#category {
  text-align: center;
  background: #ddd;
}

#listContainer {
  width: 20%;
}

span {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
  <link rel="stylesheet" href="stylesheet/style.css">
</head>

<body ng-controller="myCtrl">

  <input type="text" ng-click="openSelect()">
  <div id="selectContainer" ng-show="selectEnable">
    <div>{{selectedItems.toString()}}</div>
    <input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
    <div id="listContainer">
      <ul id="innerContainer">
        <li ng-repeat="data in data2Show">

          <input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
        </li>
        <li id="loadMore" ng-click="loadMore()">
          load more
        </li>

      </ul>
    </div>
  </div>

  <script src="script/script.js"></script>
</body>

</html>

Answer 1

Цикл for никогда не заканчивается, потому что конец увеличивается:

$http({
    method: "GET",
    url: "data.json"
  })
  .then(function onSuccess(response) {
    var innerCounter = counter;
    for (var i = innerCounter; i < (innerCounter+5); i++) {
      $scope.data.push(response.data[i]);
      ̶i̶n̶n̶e̶r̶C̶o̶u̶n̶t̶e̶r̶+̶+̶;̶
    }
    ̶c̶o̶u̶n̶t̶e̶r̶ ̶=̶ ̶i̶n̶n̶e̶r̶C̶o̶u̶n̶t̶e̶r̶;̶
    counter = innerCounter+5;

  })
  .catch(function onError(response) {
    console.log("error");
  });

Это вызывает переход браузера в бесконечный цикл.Отсюда и «сбой браузера».

---

---

Весь код можно упростить, выбрав данные только один раз:

$http.get("data.js").then(function(response) {
    $scope.data2show = response.data;
    $scope.limit = 5;
});

$scope.loadMore = function() {
    $scope.limit += 5;
};

  <ul id="innerContainer">
    <li ng-repeat="data in data2show | limitTo : limit">
      {{data.item}}
    </li>
    <li id="loadMore" ng-click="loadMore()">
      load more
    </li>
  </ul>

Для получения дополнительной информации см. AngularJS limitTo Справочник по API фильтров .