Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何自动检查嵌套ng repeat中的元素?_Javascript_Jquery_Angularjs - Fatal编程技术网

Javascript 如何自动检查嵌套ng repeat中的元素?

Javascript 如何自动检查嵌套ng repeat中的元素?,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个包含ng重复元素的div。这些ng重复元素相互关联。ng repeat的元素具有复选框。我想要的是,当top ng repeat的元素为check时,它应该自动检查其他ng repeat中的元素。下面的图片展示了元素的实际表现,接下来的图片展示了我试图实现的目标 我确实试过了,但根本不起作用 <div actor-check-box ng-repeat="actor in actors"> <div create-connections class="a

我有一个包含ng重复元素的div。这些ng重复元素相互关联。ng repeat的元素具有复选框。我想要的是,当top ng repeat的元素为check时,它应该自动检查其他ng repeat中的元素。下面的图片展示了元素的实际表现,接下来的图片展示了我试图实现的目标

我确实试过了,但根本不起作用

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

这不能使用我们所遵循的检查和取消检查元素的正常方式来实现。我通过捕获dom在指令中使用了emit和brodcast。以下是我编写的代码,它的工作方式很有魅力:

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

                });

            });

        }
    };
});

这不能使用我们所遵循的检查和取消检查元素的正常方式来实现。我通过捕获dom在指令中使用了emit和brodcast。以下是我编写的代码,它的工作方式很有魅力:

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

                });

            });

        }
    };
});