简体   繁体   中英

How can I auto check elements in nested ng-repeat?

I have a div which contains ng-repeat elements. These ng-repeat elements are inter-related to each other. Elements of ng-repeat are having checkboxes. What I want is when the element of top ng-repeat is check it should auto check the elements in other ng-repeat. Below picture is showing the actual representation of elements and next pic is showing what actually I am trying to achieve.

在此输入图像描述 在此输入图像描述

I did try this but it is not working at all

<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>

Directive code:

    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');

            });
        }
    }
});

This cannot be implemented using the normal way we follow to check and uncheck elements. I used emit and brodcast inside the directive by capturing the dom. Here is the code I wrote and it works like a charm:

    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);
                    }

                });

            });

        }
    };
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM