Javascript 刷新数据时，下拉列表在ng repeat中关闭

我使用$http获取数据，并每1秒刷新一次（服务器轮询）：

(function tick(){
    $http.get('http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric')
        .success(function (data) {
            console.log('tick');
            $scope.cities = data.list;
            $timeout(tick, 1000);
        });
})();

该数据使用ng repeat指令显示在表格中，我显示了一个引导下拉菜单：

<tr ng-repeat="city in cities">
  <td>{{city.name}}</td>
  <td>
    <div class="dropdown">
      <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><button>Buttons</button></li>
        <li><button>Are closed</button></li>
        <li><button>When $scope variable</button></li>
        <li><button>is refreshed</button></li>
      </ul>
    </div>
  </td>
</tr>

{{city.name}
下拉列表

钮扣
关门了
当$scope变量
刷新

问题是，当我打开下拉菜单时，函数tick（）一运行，它就会关闭

我尝试比较$http.get和scope中的数据，如果它们相同，则不更新$scope。但是，即使触发$http.get，即使我不更新范围变量，下拉列表也会关闭

我想能够投票和显示下拉菜单而不关闭。不过，如果在数据确实发生更改时关闭下拉列表，而不是在每次投票时关闭下拉列表，这将是合理的

---

下面是一个plunker，显示效果：

您可以使用

---

与其不断更新数组并添加对象，不如只更新现有对象，或者如果有任何新项目，则将其添加到数组中。尝试执行此操作时，您不断更改数组值，而不仅仅是更改对象

(function tick(){
    $http.get('http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric')
      .success(function (data) {

        if ($scope.cities.length === 0) {
            $scope.cities = data.list;
        }
        else{
            for (var i = 0; i < data.list.length; i++) {
                var dataCity = data.list[i];
                var found = false;
                for (var j = 0; j < $scope.cities.length; j++) {
                    var city = $scope.cities[j];
                    if (dataCity.id === city.id) {
                        found = true;
                        if (!angular.equals(city, dataCity)) {
                            angular.copy(dataCity, city);
                        }
                        break;
                    }
                }

                if (!found) {
                    $scope.cities.push(dataCity);
                }
            }

            for (var k = 0; k < $scope.cities.length; k++) {
              var cityToCheck = $scope.cities[k];
              var cityFound = false;
              for (var l = 0; l < data.list.length; l++) {
                  var dataToCheck = data.list[l];
                  if (dataToCheck.id === cityToCheck.id) {
                      cityFound = true;
                      break;
                  }
              }

              if (!cityFound) {
                $scope.cities.splice(k, 1);
                k--;
              }
            }
        }

        $timeout(tick, 1000);
    });
})();

（函数勾号（）{
$http.get（'http://api.openweathermap.org/data/2.5/group?id=524901，7034482643743&单位=公制'）
.成功（功能（数据）{
如果（$scope.cities.length==0）{
$scope.cities=data.list；
}
否则{
对于（var i=0；i

---

如果修改了项目或添加了新项目，这仍然会导致相同的问题。这是正确的，但如果只添加了新项目（根据问题要求）也没关系。您的方式看起来肯定更好+1，但需要更多的工作，我必须尝试。谢谢你的回答。这要复杂得多，但这意味着除非删除显示下拉列表的项目，否则下拉列表不会关闭。我的代码中有一个bug，无法删除其中的项。我现在已经修好了。下面是一个正在删除的项目的示例。

(function tick(){
    $http.get('http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric')
      .success(function (data) {

        if ($scope.cities.length === 0) {
            $scope.cities = data.list;
        }
        else{
            for (var i = 0; i < data.list.length; i++) {
                var dataCity = data.list[i];
                var found = false;
                for (var j = 0; j < $scope.cities.length; j++) {
                    var city = $scope.cities[j];
                    if (dataCity.id === city.id) {
                        found = true;
                        if (!angular.equals(city, dataCity)) {
                            angular.copy(dataCity, city);
                        }
                        break;
                    }
                }

                if (!found) {
                    $scope.cities.push(dataCity);
                }
            }

            for (var k = 0; k < $scope.cities.length; k++) {
              var cityToCheck = $scope.cities[k];
              var cityFound = false;
              for (var l = 0; l < data.list.length; l++) {
                  var dataToCheck = data.list[l];
                  if (dataToCheck.id === cityToCheck.id) {
                      cityFound = true;
                      break;
                  }
              }

              if (!cityFound) {
                $scope.cities.splice(k, 1);
                k--;
              }
            }
        }

        $timeout(tick, 1000);
    });
})();