1

我可以使用帮助来了解如何使这两个示例以相同的方式工作。对于初学者，这是我的完整示例：http: //jsfiddle.net/tylerbrinks/DZbfD/

我正在使用一个简单的控制器来管理索引。我意识到这不是 100% 必要的，但我正在将一个更大的问题简化为最基本的部分以寻求帮助。控制器如下所示：

function TabCtrl($scope){
    $scope.index = 0;
}

我正在使用索引值来维护列表中的哪个项目被选中（如选项卡）。

当元素已经在 DOM 中时，它们的行为完全符合我的预期。单击每个项目可切换选择哪个项目。在 JsFiddle 中，颜色会更改以显示所选项目。

<div ng-controller="TabCtrl">
    <div ng-class="{selected: index == 0}" ng-click="index = 0">Click Me. Position is 0, scope.index is {{index}}</div>
    <div ng-class="{selected: index == 1}" ng-click="index = 1">Click Me. Position is 1, scope.index is {{index}}</div>
    <div ng-class="{selected: index == 2}" ng-click="index = 2">Click Me. Position is 2, scope.index is {{index}}</div>
</div>

这是完美的 - 表现得如我所愿。我的问题是我有一个动态列表，我正在使用ng-repeat来构建它。当我这样做时，ng-repeat似乎为列表中的每个项目提供了一个新的范围。这意味着我无法在它们之间切换，因为它们不共享相同的索引属性。相反，每个列表项都有自己的范围，每个范围都有唯一的索引值。

这是同样的事情，但使用 ng-repeat。我没有在点击时对索引进行硬编码，而是将其设置为中继器的 $index 属性。

<div ng-controller="TabCtrl">
    <div  ng-repeat="item in [1,2,3]" ng-class="{selected: index == $index}" ng-click="index = $index">Click Me.  Position is: {{$index}}, scope.index is {{index}}</div> 
</div>

如何使动态列表像静态列表一样共享单个范围？

谢谢您的帮助！

4

3 回答 3

3

您可以在父作用域中创建一个对象，以便可以在子作用域中使用该值。像这样的东西：

小提琴

function TabCtrl($scope){
    $scope.myVariables = { index : 0 };
}

<div ng-controller="TabCtrl">
    <div ng-repeat="item in [1,2,3]" ng-class="{selected: myVariables.index == $index}" ng-click="myVariables.index = $index">Click Me.  Position is: {{$index}}, myVariables.index is {{myVariables.index}}</div> 
</div>
于 2013-10-04T15:48:17.817 回答
1

是的，正如我所说的那样，你必须在你的父范围内有一些东西。我个人喜欢用一个函数

所以在你的控制器中：

  $scope.activate= function(index){
      $scope.index=index;
  };

然后是 ng-class：

ng-class="{ active:index=={{$index}}}"

并点击：

ng-click="activate({{$index}})"
于 2013-10-04T16:47:41.910 回答
1

因为为列表中的每个项目创建了一个新范围，所以您对 index 的分配将在每个新范围中创建一个新变量；本质上，列表中的每个项目都有自己的索引变量副本。

相反，将您的索引声明为父范围的子字段：

function TabCtrl($scope){
    $scope.container = {
      index: 0
    }
}

然后在你曾经引用 index 的所有地方引用 HTML 中的 container.index。

我使用的规则是所有对范围变量的 HTML 引用都应该包含“。” - 如果他们不这样做，那么我可能已经违反了范围规则。

于 2013-10-04T15:54:39.463 回答