刷新数据时,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>

问题是,当我打开下拉菜单时,一旦函数tick()运行,它就会关闭.

我试图比较$http.get和scope中的数据,并且在它们相同的情况下不更新$scope.但是即使触发$http.get,即使我不更新范围变量,下拉列表也将关闭.

我希望能够在不关闭的情况下轮询并显示下拉菜单.但是,如果在真正更改数据而不是在每次轮询时都关闭下拉列表,那将是合理的.

这是一个显示效果的塞子：http://plnkr.co/edit/yqYsQ32XaAhZEsD2XWMu?p=preview

解决方法:

您可以使用angular.equals检查对象是否等效

if(!angular.equals($scope.cities, data.list)) {
            $scope.cities = data.list;
}

Plunkr demo

标签：angularjs,twitter-bootstrap,angularjs-ng-repeat,drop-down-menu,javascript
来源： https://codeday.me/bug/20191120/2046535.html