Yuvalanmış yineleme tekrar öğelerini otomatik olarak nasıl denetleyebilirim?

Question

Yinelenen öğeler içeren bir div var. Bu ng tekrar elemanları birbiriyle ilişkilidir. Ng tekrarı elemanları onay kutularına sahip. İstediğim şey, ng-tekrarı öğesinin, diğer ng-tekrardaki öğeleri otomatik olarak kontrol etmesi gerektiğinde kontrol edilmesidir. Aşağıdaki resim öğelerin gerçek temsilini gösteriyor ve bir sonraki resim aslında ne elde etmeye çalıştığımı gösteriyor.

Bunu çalıştım ama hepsi

<div actor-check-box ng-repeat="actor in actors"> 

    <div create-connections class="actor\{{$index}}" > 
      <span><input class="checkbox-actor" type="checkbox" name="actor-checkbox" id="actor-checkbox\{{$index}}">\{{actor}}</span> 
    </div> 

     <div ng-repeat="activity in activities"> 

     <div ng-if="actor == activity.id"> 

      <div ng-repeat = "impact in activity.text" > 
       <div update-connections class="impact\{{$index}}actor\{{actors.indexOf(actor)}}" actor-id="actor\{{actors.indexOf(actor)}}"> 
        <span><input class="checkbox-activity" type="checkbox" name="impact-checkbox" id="activity-checkbox\{{$index}}actor\{{actors.indexOf(actor)}}" activity-check-box>\{{impact}}</span> 
       </div> 

       <div ng-repeat="feature in features"> 

        <div ng-if="actor == feature.id && impact == feature.key"> 
         <div feature-connection ng-repeat = "feature in feature.text" class="feature\{{$index}}" activity-id="impact\{{activity.text.indexOf(impact)}}actor\{{actors.indexOf(actor)}}" id=""> 
           <span><input class="checkbox" type="checkbox" name="impact-checkbox" id="" >\{{feature}}</span> 
         </div> 
        </div> 

       </div> 

      </div> 

     </div> 

     </div> 

</div> 

Yönergesi kodu çalışmıyor:

angular.module('mainModule').directive('activityCheckBox', function($interval) { 
    return { 
     restrict: 'EA', 
     /*replace: false,*/ 
     scope: { 
      ngModel:'=' 
     } 
     /*require: 'createConnections','updateConnections', 'featureConnection'*/, 
     /*transclude: true,*/ 

     link: function(scope, element, attrs) { 

      element.find('input[type="checkbox"]').prop('checked',true); 
     } 
    }; 
}); 


angular.module('mainModule').directive('actorCheckBox', function($interval) { 

    return { 
     restrict: 'EA', 
     /*transclude: true,*/ 

     link: function (scope, element, attrs, ctrl) { 

      console.log(element); 

      scope.$watch('ngModel', function(newValue){ 



       element.find('input[type="checkbox"]').prop('activityCheckBox',true).trigger('change'); 

      }); 
     } 
    } 
}); 

Answer 1

Biz kontrol etmek izleyin, normal şekilde kullanarak hayata olamaz ve öğelerin işaretini kaldırın. Direktifi içinde domı yakalayarak emit ve brodcast kullanmıştım. İşte yazdığım kod ve bir çekicilik gibi çalışır:

angular.module('mainModule').directive('allCheckboxesBroadcast', function($interval) { 
    return { 
     restrict: 'A', 
     controller: function($scope) { 

      $scope.checkAll = function (model,id) { 
       if (model == true){ 
        $scope.$broadcast('allCheckboxes',id, true); 
       }else{ 
        $scope.$broadcast('allCheckboxes',id, false); 
       } 

      } 

     } 
    }; 
}); 

    angular.module('mainModule').directive('allCheckboxesListeners', function($interval) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 

      attrs.$observe('actorId', function(value) { 


       scope.$on('allCheckboxes', function(event, id,shouldCheckAllCheckboxes) { 

        actorId = 'actor' + id; 
        if (value == actorId){ 

         element.find('input').prop('checked', shouldCheckAllCheckboxes); 
         $scope.$broadcast('featureCheckboxesListeners', actorId, true); 
        } 

       }); 

      }); 

     } 
    }; 
});