如何在不創建新範圍的情況下使用ng-repeat？

Question

我正在使用ng-repeat來放置btn組中的angular-ui-bootstrap library多個複選框按鈕。角度記錄說each template instance gets its own scope。我相信以下ng-repeat代碼無法工作，因爲它不使用與父控制器相同的作用域，因此無法訪問$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（控制器內部）

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

比ks

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哪裏的合適範圍。

UPDATE

您可能必須建立在你的數組的包裝。在你的控制器，報關/轉讓改成這樣：

$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 
    } 
];