Question

我正在使用ng-repeat从btn-group内的angular-ui-bootstrap library放置多个复选框按钮。角度文档说each template instance gets its own scope。我认为以下ng-repeat代码无法正常工作，因为它不使用与父控制器相同的范围，因此无法访问$scope.zones。

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

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（在控制器内部）

/*  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适当的范围。

<强>更新

您可能需要在数组周围构建一个包装器。在您的控制器中，将声明/分配更改为：

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

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

Answer 2

好的，就像+ Adam Zuckerman所说，我需要一个围绕我的$scope.zones对象的包装器，但是我必须将它变成一个数组，这允许我访问具有$index属性的模型

<强> HTML

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

<强> JS

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

如何在不创建新范围的情况下使用ng-repeat？

2 个答案: