Question

如何在angularjs

中访问http范围之外的变量

我想制作一个多选下拉列表，首先从JSON获取前5个数据，当点击显示更多时，从JSON获取更多数据。所以我在$ http之外做了一个计数器，我想在显示第一组数据后更新它，所以我可以在loadMore函数中使用它来继续计数，但变量没有更新。每当我点击＆＃34;加载更多＆＃34;我的浏览器崩溃了。我的代码是这样的：

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
}
]

我的整个代码如下。提前谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

这会导致浏览器进入无限循环。因此，＆＃34;浏览器崩溃＆＃34;。

只需获取一次数据就可以简化整个代码：

$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 Filter API Reference。

`for`循环导致浏览器崩溃

如何在angularjs

1 个答案: