angularjs - 如何在不创建新作用域的情况下使用 ng-repeat？

Question

我正在使用 ng-repeat 放置 angular-ui-bootstrap library 中的多个复选框按钮btn 组内部。 Angular 文档说 each template instance gets its own scope 。我相信以下 ng-repeat 代码无法工作，因为它不使用与父 Controller 相同的作用域，因此无法访问 $scope.zones。

问题:我可以在相同的原始 $scope 上下文中使用 ng-repeat 吗？如果是这样，我可能会遇到什么问题以及我还有哪些其他方法可以使其正常工作？

HTML

<div class="btn btn-primary" ng-repeat="(zone, action) in zones track by $index" btn-checkbox ng-model="zones['{{zone}}'])"> Zone - {{zone}}</div>

工作版本

<div btn-checkbox="btn-checkbox" ng-model="zones['one']" class="btn btn-primary">Zone 1</div>
<div btn-checkbox="btn-checkbox" ng-model="zones['two']" class="btn btn-primary">Zone 2</div>
<div btn-checkbox="btn-checkbox" ng-model="zones['three']" class="btn btn-primary">Zone 3 </div>
<div btn-checkbox="btn-checkbox" ng-model="zones['goal']" class="btn btn-primary">Goalie Zone </div>

JS( Controller 内部)

/*  Zones  */
$scope.zones = {
  'one': false,
  'two': false,
  'three': false,
  'goal': false
};

谢谢

Answer 1

有两种方法可以做到这一点:使用 $parent 指令将您的范围保持在与父项相同的级别(不是推荐的方法)；或者在 ngModel 属性上使用 model.property 样式。

我最近遇到的问题是我想在没有模型声明的情况下分配 ngModel 属性:

<input type="text" id="{{question.id}}" ng-model="Answer"/>

当我将其更改为这样时，一切正常:

<input type="text" id="{{question.id}}" ng-model="question.Answer"/>

使用点符号还可以告诉 Angular 适当的范围在哪里。

更新

您可能必须围绕数组构建一个包装器。在您的 Controller 中，将声明/赋值更改为:

$scope.model.zones = { 'one': false,
                       'two': false,
                       'three': false,
                       'goal': false };

然后将示例 div 中的 ngModel 引用更改为 model.zones['one']。