Question

与此question相关让我们说你在$ interval内包装了$ scope.items变量的设置？

HTML：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="MyApp" ng-controller="MyCntrl">
    <div ng-repeat="item in items" ng-click="myFunct(item)">

      <div ng-if="!item.expanded">{{item.shortTitle}}</div>
      <p ng-if="item.expanded">{{item.longTitle}}</p>

    </div>
  </body>

</html>

Cntrl代码：

var myApp = angular.module("MyApp", []);
myApp.controller('MyCntrl', ['$scope', '$interval', function($scope, $interval) {

  $interval(function() {
      console.log("run");
      $scope.items = [{shortTitle: "short title 1", longTitle: "Long Title 1"},
        {shortTitle: "short title 2", longTitle: "Long Title 2"}];
    }, 1000);

  var expandedItem;

  $scope.myFunct = function(item) {
    if (expandedItem && expandedItem != item) {
        expandedItem.expanded = false;
    }
    expandedItem = item;
    item.expanded = !item.expanded;
  };

}]);

下面是我的设置下面的一个plunker：

PLUNKER

当您切换项目时（等待它显示...如果需要，您可以调整$ interval） - 当下一个$ interval启动时，我将如何阻止它们关闭？

Answer 1

每隔一秒您将项目重置为新对象（其中所有项目都已折叠）。如果您确实希望即使在下一次数据更改后仍将扩展项目保持扩展，您也不应该在$ interval中覆盖项目。可以检查项目是否为空并在$ interval中设置项目。

像这样

 $interval(function() {
  console.log("run");
  if(!$scope.items) {
   $scope.items = [{shortTitle: "short title 1", longTitle: "Long Title 1"},
    {shortTitle: "short title 2", longTitle: "Long Title 2"}];
  }
}, 1000);

如果您正在模拟Ajax同步数据，则应该使用响应覆盖项目，而应检查此响应中是否有任何新项目并将其推送到$ scope.items。否则，您存储在items对象中的所有状态都将被删除

Answer 2

你应该循环通过新加载的数组并为相应的项设置扩展标志。我假设项目有某种id，以便于识别。修改后的代码可能如下所示：

var expandedItem;

$interval(function() {

    $scope.items = [{
        id: 1,
        shortTitle: "short title 1",
        longTitle: "Long Title 1"
    }, {
        id: 2,
        shortTitle: "short title 2",
        longTitle: "Long Title 2"
    }];

    if (expandedItem && expandedItem.expanded) {
        expandedItem = $scope.items.filter(function(item) {
            return item.id === expandedItem.id;
        })[0];
        expandedItem.expanded = true;
    }


}, 5000);

$scope.myFunct = function(item) {
    if (expandedItem && expandedItem.id !== item.id) {
        expandedItem.expanded = false;
    }
    expandedItem = item;
    item.expanded = !item.expanded;
};

演示： http://plnkr.co/edit/qen4DU8O1jWeSsWO2p0s?p=preview

请注意，您无法比较expandedItem == item，因为它们是不同的对象（即使它们看起来相同）。在这种情况下，您需要比较它们的ID。

设置范围时的ng-if和$ interval - 奇怪的行为

2 个答案: