Question

Noob问题在这里我试图找到在ng-repeat中设置范围变量的最佳方法。由于列表的每个索引都具有相同的范围变量，因此当我只希望一个项目的范围受到影响时，我看到了对多行的更改。有角度处理这个问题的最佳方法是什么？我现在已经尝试过挖掘几个小时了，但我似乎无法让它发挥作用。

如果您看一下下面的plunker，您会看到我正在迭代基本对象数组。我还有一个ng-click设置，这样当用户点击数组中的项目时，应该显示长标题并隐藏该项目的简短标题仅。但正如你所看到的那样，它也会影响数组中的第二项，原因很明显（它们都绑定到相同的$ scope var）。

最好的方法是什么，只有我选择的项目会隐藏标题并显示长标题？

代码：

<!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="expanded == null">{{item.shortTitle}}</div>
      <p ng-if="expanded != null">{{item.longTitle}}</p>

    </div>
  </body>

</html>

var myApp = angular.module("MyApp", []);
myApp.controller('MyCntrl', ['$scope', function($scope) {
  $scope.items = [{shortTitle: "short title 1", longTitle: "Long Title 1"},
  {shortTitle: "short title 2", longTitle: "Long Title 2"}];
  $scope.expanded = null;
  $scope.myFunct = function(item) {
    $scope.expanded = item;
  };

}]);

PLUNK：http://plnkr.co/edit/xWTDJF7S5wvtxFq5aakv?p=preview

Answer 1

您可以通过this.expanded = item执行此操作，因为this上下文将只是ng-repeat创建的子范围。

$scope.myFunct = function(item) {
 this.expanded = item;
};

如果你想要真正明确，那么只需传入ng-click="myFunct(item, this)"并执行：

$scope.myFunct = function(item, childScope) {
  childScope.expanded = item;
};

将this作为ng-click参数传递的原因是因为每个范围都有一个名为this的属性，它指向自身，而不像在通过DOM调用的事件上传递this，ng -click不会那样工作，它会根据范围评估参数，所以scope[这个] ==> scope。

当然你也可以这样做： -

ng-click="expanded = item"

但最好将逻辑隔离到控制器上。

Answer 2

将扩展名作为布尔值添加到项目而不是范围。然后使用私有变量来保留先前展开的项目，然后可以将其折叠：

var expandedItem;

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

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

Plunkr

使用ng-repeat时如何停止传播（或如何更好地隔离范围）

2 个答案: