Доступ к области ngRepeat

Question

Я хочу очистить свойство текстового поля, прикрепленное к области ngRepeat, когда пользователь нажимает кнопку sibling. Как бы вы это сделали?

ngRepeat, похоже, не раскрывает его область действия. В противном случае я бы передал эту функцию addCustomCheckbox.

Частичное

<div ng-repeat="template in currentUser.templates"> 

     <div class="form-group"> 
      <h4>Custom Checkboxes</h4> 
      <ul class="list-group"> 
       <li ng-repeat="cc in template.customCheckboxes" class="list-group-item">{{cc}}</li> 
      </ul> 
      <input type="text" ng-model="newCustomCheckboxName"/> 
      <button ng-click="addCustomCheckbox(template,newCustomCheckboxName)" class="btn btn-primary">Add Checkbox</button> 
     </div> 
</div> 

Контроллер

$scope.addCustomCheckbox = function(template,checkboxName){ 
    if(checkboxName==="") return; 

    if(_.find(template.customCheckboxes,checkboxName)===undefined){ 
     template.customCheckboxes.push(checkboxName); 
     //todo: clear ngRepeatScope newCustomCheckboxName here. 
    } 

} 

Answer 1

Попробуйте реверсирования ваше мышление. Не думайте, как вы можете получить доступ к области в ng-repeat, вместо этого подумайте о том, как вы можете перемещать данные, которые хотите получить, до вашего области.

Предположим, что ваша $ scope, содержащая этот ng-repeat, имеет свойство $ scope, называемое 'model' ($ scope.model). Затем мы можем установить вашу модель (ы) ввода в этом объекте $ scope.model, а не оставлять его на объекте внутри области ng-repeat.

В моем примере предполагается, что 'cc' уникален для каждой итерации.

<div ng-repeat="template in currentUser.templates"> 

     <div class="form-group"> 
      <h4>Custom Checkboxes</h4> 
      <ul class="list-group"> 
       <li ng-repeat="cc in template.customCheckboxes" class="list-group-item">{{cc}}</li> 
      </ul> 
      <input type="text" ng-model="model[cc]"/> 
      <button ng-click="addCustomCheckbox(template,cc)" class="btn btn-primary">Add Checkbox</button> 
     </div> 
</div> 

$scope.addCustomCheckbox = function(template,cc){ 
    var data = $scope.model[cc]; 
    if(data==="") return; 

    if(_.find(template.customCheckboxes,data)===undefined){ 
     template.customCheckboxes.push(data); 
     $scope.model[cc] = ""; 
    } 

}