尝试从位于另一个控制器中的控制器激活复选框 [英] Trying to activate a checkbox from a controller that lives in another controller

查看：24
本文介绍了尝试从位于另一个控制器中的控制器激活复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从位于另一个控制器中的控制器激活复选框.例如，我在一个单独的控制器下有一张名为 information technology 的卡片，当我点击它时，我希望它路由到另一个页面，该页面有一个来自另一个页面的 information technology 复选框控制器，我希望它在呈现页面时进行检查.

应用程序架构非常冗长，因此我不会在此处包含任何代码库.但我想知道我可以采取的方法.

这是我希望逻辑存在的控制器，并将文本框标记为已选中(位于另一个控制器上).

angular.controller("mycontroller", mycontroller);mycontroller.$inject = [$范围"];//获取 getData() 数据$scope.getData = 函数(数据，类型){console.log("getData(data) 中的数据是什么", data)$scope.query = data.name;if (data.checked == undefined) {data.checked = true;}}

下面:复选框控制器所在的控制器

angular.controller('supplierIntelligenceCtrl', function ($scope, $q, FetchData, dataStore, SharedService,$document, $window, $state, $rootScope, $timeout, DataCache,$filter, $interval, $localStorage, $http) {$scope.getData = 函数(数据，类型){console.log("getData(data) 中的数据是什么", data)$scope.query = data.name;if (data.checked == undefined) {data.checked = true;}}$scope.apply = 函数(类型){$scope.select = false;$scope.bigres = 0;$scope.mobFil = 3;$scope.applyFilter(type);}$scope.disableApply = false;$scope.disableApply2 = false;$scope.applyFilter = 函数(类型){console.log("这是类型", type)如果(类型=='行业'){$scope.filters.industries = $scope.industries.filter(function (e) {console.log("这是 e ", e.checked)返回 e.checked;}).map(函数(f){console.log(" 这是 f >>>> ",F)返回 f.id})$scope.filters.countries = [];如果($scope.countries ！= 未定义){$scope.countries = $scope.countries.map(function (e) {e.checked = false;返回 e;})}$scope.filters.cities = [];如果($scope.cities ！= 未定义){$scope.cities = $scope.cities.map(function (e) {e.checked = false;返回 e;})}$scope.start = 0;如果($scope.filters.industries.length > 0){$scope.callBackend();$scope.disableApply2 = true;FetchData.fetchDNBCountriesByIndustries('industries=' + $scope.filters.industries + '&size=').then(function (res) {$scope.disableApply2 = false;$scope.countries = res.data;$scope.countriesPage += 10}， 功能 () {$scope.disableApply2 = false;});} 别的 {$scope.callBackend();}}如果(类型=='国家'){$scope.filters.countries = $scope.countries.filter(function (e) {返回 e.checked;}).map(函数(f){返回 f.id;})$scope.filters.cities = [];如果($scope.cities ！= 未定义){$scope.cities = $scope.cities.map(function (e) {e.checked = false;返回 e;})}$scope.start = 0;如果($scope.filters.countries.length > 0){$scope.callBackend();$scope.disableApply2 = true;FetchData.fetchDNBCitiesByIndustriesAndCountries('industries=' + $scope.filters.industries + '&countries=' + $scope.filters.countries + '&size=').then(function (res) {$scope.disableApply2 = false;$scope.cities = res.data;}， 功能 () {$scope.disableApply2 = false;})} 别的 {$scope.callBackend();}}如果(类型=='城市'){$scope.filters.cities = $scope.cities.filter(function (e) {返回 e.checked;}).map(函数(f){返回 f.id})$scope.start = 0;$scope.callBackend();}如果(类型=='分类'){$scope.filters.classifications = $scope.classifications.filter(function (e) {返回 e.checked;}).map(函数(f){返回 f.statusCode;})$scope.start = 0;$scope.callBackend();}}}

这是复选框所在的 HTML:

<div ng-repeat="行业数据"><input id="{{data.id}}in" type="checkbox" aria-invalid="false"ng-model="data.checked"ng-change="getData(data,'industry')"><label for="{{data.id}}in">{{data.name}}</label>

也许我在这里错过了重点，也许我忽略了一些东西.我是 angularjs 的新手，需要实现此功能以将按钮/卡片路由到另一个检查复选框过滤器的页面.

请 - 任何建议都会很棒.:)

解决方案

以下是控制器通过依赖注入器注入的共享服务共享数组的示例.选中一个控制器中的复选框，它会显示在另一个控制器中.

angular.module('app', []);angular.module('app').factory('dataService', [function () {返回 {数据: [{道具:'1'，检查:假}，{道具:'2'，检查:假}，{道具:'3'，检查:假}，{道具:'4'，检查:假}]};}]);angular.module('app').controller('controller1', ['dataService', function (dataService) {this.data = dataService.data;}]);angular.module('app').controller('controller2', ['dataService', function (dataService) {this.data = dataService.data;}]);angular.module('app').controller('controller3', ['dataService', function (dataService) {this.toggleAll = () =>{dataService.data.forEach(item => item.checked = !item.checked)};}]);

[ng-controller] { display: inline-block;右边距:30px；垂直对齐:顶部；}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script><div ng-app="app"><div ng-controller="controller1 as ctrl"><strong>控制器 1</strong><div ng-repeat="ctrl.data 中的项目"><label>Item {{item.prop}} <input type="checkbox" ng-model="item.checked"></label>

<div ng-controller="controller2 as ctrl"><strong>控制器 2</strong><div ng-repeat="ctrl.data 中的项目"><label>Item {{item.prop}} <input type="checkbox" ng-model="item.checked"></label>

<div ng-controller="controller3 as ctrl"><strong>控制器 3</strong><div><button ng-click="ctrl.toggleAll()">全部切换</button>

I am trying to activate a checkbox from a controller that lives in another controller. For example, I have a card named information technology under a separate controller and when I click this I want it to route to another page that has a checkbox for information technology from another controller and I want it checked as it renders the page.

The application architecture is very lengthy so I wont include any code base here. But I would like to know an approach I can take.

This is the controller where I want the logic to live and to mark a text box as checked (which lives on another controller). 

angular
  .controller("mycontroller", mycontroller);
  mycontroller.$inject = [
        "$scope"
    ];

    // getting the getData() data
        $scope.getData = function (data, type) {
            console.log("whats this data about in getData(data) ", data)
            $scope.query = data.name;
            if (data.checked == undefined) {
                data.checked = true;
            }
        }

Below: Is the controller where the checkbox controller lives

angular
    .controller('supplierIntelligenceCtrl', function ($scope, $q, FetchData, dataStore, SharedService,
        $document, $window, $state, $rootScope, $timeout, DataCache,
        $filter, $interval, $localStorage, $http) {

                $scope.getData = function (data, type) {
            console.log("whats this data about in getData(data) ", data)
            $scope.query = data.name;
            if (data.checked == undefined) {
                data.checked = true;
            }


        }

        $scope.apply = function (type) {
            $scope.select = false;
            $scope.bigres = 0;
            $scope.mobFil = 3;
            $scope.applyFilter(type);
        }

        $scope.disableApply = false;
        $scope.disableApply2 = false;

        $scope.applyFilter = function (type) {
            console.log("this is type ", type)
            if (type == 'industries') {
                $scope.filters.industries = $scope.industries.filter(function (e) {
                    console.log("this is e ", e.checked)
                    return e.checked;
                }).map(function (f) {
                    console.log(" this is f >>>> ",
                        f)
                    return f.id
                })

                $scope.filters.countries = [];
                if ($scope.countries != undefined) {
                    $scope.countries = $scope.countries.map(function (e) {
                        e.checked = false;
                        return e;
                    })
                }
                $scope.filters.cities = [];
                if ($scope.cities != undefined) {
                    $scope.cities = $scope.cities.map(function (e) {
                        e.checked = false;
                        return e;
                    })
                }
                $scope.start = 0;
                if ($scope.filters.industries.length > 0) {
                    $scope.callBackend();
                    $scope.disableApply2 = true;
                    FetchData.fetchDNBCountriesByIndustries('industries=' + $scope.filters.industries + '&size=').then(function (res) {
                        $scope.disableApply2 = false;
                        $scope.countries = res.data;
                        $scope.countriesPage += 10
                    }, function () {
                        $scope.disableApply2 = false;
                    });
                } else {
                    $scope.callBackend();
                }
            }
            if (type == 'countries') {

                $scope.filters.countries = $scope.countries.filter(function (e) {
                    return e.checked;
                }).map(function (f) {
                    return f.id;
                })
                $scope.filters.cities = [];
                if ($scope.cities != undefined) {
                    $scope.cities = $scope.cities.map(function (e) {
                        e.checked = false;
                        return e;
                    })
                }
                $scope.start = 0;
                if ($scope.filters.countries.length > 0) {
                    $scope.callBackend();
                    $scope.disableApply2 = true;
                    FetchData.fetchDNBCitiesByIndustriesAndCountries('industries=' + $scope.filters.industries + '&countries=' + $scope.filters.countries + '&size=').then(function (res) {
                        $scope.disableApply2 = false;
                        $scope.cities = res.data;
                    }, function () {
                        $scope.disableApply2 = false;
                    })
                } else {
                    $scope.callBackend();
                }
            }
            if (type == 'cities') {
                $scope.filters.cities = $scope.cities.filter(function (e) {
                    return e.checked;
                }).map(function (f) {
                    return f.id
                })
                $scope.start = 0;
                $scope.callBackend();
            }


            if (type == 'classifications') {
                $scope.filters.classifications = $scope.classifications.filter(function (e) {
                    return e.checked;
                }).map(function (f) {
                    return f.statusCode;
                })
                $scope.start = 0;
                $scope.callBackend();
            }
        }

        }

Here is the HTML where the checkbox lives:

<div ng-repeat="data in industries  ">                                 
   <input id="{{data.id}}in" type="checkbox" aria-invalid="false"
          ng-model="data.checked"
          ng-change="getData(data,'industry')">
  <label for="{{data.id}}in">{{data.name}}</label>
</div>

Maybe Im missing the point here and perhaps am overlooking something. Im new to angularjs and need to implement this capability to route a button/card to another page that checks a checkbox filter.

Please - any advise would be great . :)

解决方案

Here is an example of controllers sharing an array via a shared service injected by the dependency injector. Check the checkbox in one controller and it shows in the other.

angular.module('app', []);

angular.module('app')
  .factory('dataService', [function () {
    return {
      data: [
        { prop: '1', checked: false },
        { prop: '2', checked: false },
        { prop: '3', checked: false },
        { prop: '4', checked: false }
      ]
    };
  }]);

angular.module('app')
  .controller('controller1', ['dataService', function (dataService) {
    this.data = dataService.data;
  }]);

angular.module('app')
  .controller('controller2', ['dataService', function (dataService) {
    this.data = dataService.data;
  }]);
  
angular.module('app')
  .controller('controller3', ['dataService', function (dataService) {
    this.toggleAll = () => {
      dataService.data.forEach(item => item.checked = !item.checked)
    };
  }]);

[ng-controller] { display: inline-block; margin-right: 30px; vertical-align: top; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="controller1 as ctrl">
    <strong>Controller 1</strong>
    <div ng-repeat="item in ctrl.data">
      <label>Item {{item.prop}} <input type="checkbox" ng-model="item.checked"></label>
    </div>
  </div>
  
  <div ng-controller="controller2 as ctrl">
    <strong>Controller 2</strong>
    <div ng-repeat="item in ctrl.data">
      <label>Item {{item.prop}} <input type="checkbox" ng-model="item.checked"></label>
    </div>
  </div>
  
  <div ng-controller="controller3 as ctrl">
    <strong>Controller 3</strong>
    <div>
      <button ng-click="ctrl.toggleAll()">Toggle all</button>
    </div>
  </div>
</div>

这篇关于尝试从位于另一个控制器中的控制器激活复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆