Angular Material md-switch 并在一个控制器中搜索输入到另一个控制器 [英] Angular Material md-switch and search input in one controller to another controller

问题描述

我有一个有效的搜索字段和一组复选框，它们可以在 Angular JS 1.5.5 中的控制器内正确处理我的数据.我有一个带有搜索字段和一些角度材料开关的第二个控制器.我希望开关绑定到复选框，但不知道如何将其从一个控制器绑定到另一个控制器，加上开关是真/假，但复选框的真/假值不是真/假，它们是字符串.

 .controller('mainController', function($scope, $route, $routeParams, $location, $http) {//数据对象$http({方法:'获取'，网址:'utahgolf.json'}).success(功能(数据，状态，标题，配置){$scope.courses = 数据；}).error(function (data, status, headers, config) {//出了些问题 :(});//过滤默认值$scope.Filter = new Object();$scope.Filter.courseType = {'公共':'公共','私人':'私人','军事': '军事','度假村':'度假村'};$scope.Filter.region = {'北':'北','中央':'中央','西南': '西南','东南':'东南'};//默认顺序$scope.OrderFilter = 'name';})//全局搜索过滤器.filter('searchFilter',function($filter) {返回函数(项目，搜索过滤器){var isSearchFilterEmpty = true;angular.forEach(搜索过滤器，函数(搜索字符串){if(searchstring !=null && searchstring !=""){isSearchFilterEmpty=假；}});if(!isSearchFilterEmpty){var 结果 = [];angular.forEach(项目，功能(项目){var isFound = false;angular.forEach(item, function(term,key) {if(term != null && !isFound){term = term.toString();term = term.toLowerCase();angular.forEach(搜索过滤器，函数(搜索字符串){searchstring = searchstring.toLowerCase();if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){结果.推(项目)；isFound = true;}});}});});返回结果；}别的{退换货品;}}}).factory('ser1', function(){课程 = {公众:真实，私人:真实，军事:真的，度假村:真的，};返回课程；}).controller('one', function($scope, ser1){$scope.courses = ser1;}).controller('二',function($scope, ser1){$scope.courses = ser1;//console.log($scope.courses);}).controller('SwitchDemoCtrl', function($scope, ser1) {$scope.data = ser1;$scope.check = 函数 () {//console.log($scope.data);}$scope.message = '假';$scope.change = 函数(cbState){$scope.message = cbState;//console.log($scope.message);};})

搜索页面 HTML:

 
<!-- <div layout="row" layout-align="center center" class="bar"><input type="text" class="search" ng-model="data.searchString" placeholder="输入搜索词"/><i class="material-icons search-info" ng-click="showAlert($event)">info</i>
--><label>搜索:<input ng-model="searchText"></label><h2>课程类型</h2><label>公共</label><input type="checkbox" ng-model="Filter.courseType.public" ng-true-value="'public'" ng-false-value="'!public'"/>&nbsp;<label>私有</label><input type="checkbox" ng-model="Filter.courseType.private" ng-true-value="'private'" ng-false-value="'!private'"/>&nbsp;<label>军事</label><input type="checkbox" ng-model="Filter.courseType.military" ng-true-value="'military'" ng-false-value="'!military'"/>&nbsp;<label>度假村</label><input type="checkbox" ng-model="Filter.courseType.resort" ng-true-value="'resort'" ng-false-value="'!resort'"/>&nbsp;<小时/><h2>区域</h2><label>北方</label><input type="checkbox" ng-model="Filter.region.northern" ng-true-value="'northern'" ng-false-value="'!northern'"/>&nbsp;<label>中央</label><input type="checkbox" ng-model="Filter.region.central" ng-true-value="'central'" ng-false-value="'!southern'"/><label>西南</label><input type="checkbox" ng-model="Filter.region.southwestern" ng-true-value="'southwestern'" ng-false-value="'!southwestern'"/><label>东南</label><input type="checkbox" ng-model="Filter.region.southeastern" ng-true-value="'southeastern'" ng-false-value="'!southeastern'"/><小时/><h2>结果:</h2><div ng-repeat="课程中的课程 | filter:searchText | searchFilter:Filter.name | searchFilter:Filter.courseType | searchFilter:Filter.region | orderBy:OrderFilter" ><div flex-xs="100" flex-gt-xs="100" layout="column"><md-card ng-click="cardSelected(course.id)" class="cardAsLink"><md-card-title><md-card-title-text class="md-card-title-text"><span class="md-headline course-name">{{course.name}}</span><span class="md-subhead">{{course.city}}, {{course.state}}</span><span class="md-subhead">{{course.coursetype}} |{{course.holes}} 洞</span><!-- <span class="md-subhead">{{course.phone}}</span>--></md-card-title-text><md-card-title-media><div class="md-media-sm card-media"><img class="img img-responsive course-card-image" ng-src="img/thumbs/{{course.id}}-1.jpg"></div></md-card-title-media></md-card-title><!-- <md-card-actions layout="row" layout-align="center"><md-button><a href="#/course/{{course.id}}"><i class="material-icons tk-action-icon">pageview</i></a></md-button><md-button><a href="#/course/{{course.id}}"><i class="material-icons tk-action-icon">directions</i></a></md-button><md-button><i class="material-icons tk-action-icon">phone</i></md-button></md-card-actions>--></md-card>

Material Design 开关和第二个搜索框:

 
<div class="search-filter-module">搜索:<br/><input type='search' class="search-filter" ng-model="searchText"/><a title="clear input" ng-show="searchText != null" class="clear clear-search" ng-click="searchText = null"><i ng-show="searchText != null" class="material-icons">clear</i></a>
课程类型:<md-switch ng-model="courses.public" aria-label="Switch 1" ng-click="check()">民众</md-switch><md-switch ng-model="courses.private[![在此处输入图片描述][1]][1]" aria-label="Switch 2" ng-click="check()">私人的</md-switch><md-switch ng-model="courses.military" aria-label="Switch 3" ng-click="check()">军队</md-switch><md-switch ng-model="courses.resort" aria-label="Switch 4" ng-click="check()">采取</md-switch>地区:<md-switch ng-model="courses.northern" aria-label="Switch 5" ng-click="check()">北方</md-switch><md-switch ng-model="courses.central" aria-label="Switch 6" ng-click="check()">中央</md-switch><md-switch ng-model="courses.southwestern" aria-label="Switch 7" ng-click="check()">西南</md-switch><md-switch ng-model="courses.southeastern" aria-label="Switch 8" ng-click="check()">东南</md-switch>

解决方案

要使用 Angular Material，您仍然可以使用 ng-true-value 和 ng-false-value 设置过滤器对象.

要将两个控制器连接在一起，我建议创建一个返回过滤器设置对象的服务方法.然后，您可以将服务注入到两个控制器中，并将本地范围变量设置为其值.每当一个控制器更改对象时，它都会反映在另一个控制器中:

var app = angular.module('app', ['ngMaterial']);app.controller('mainController', function($scope, filterSettings) {$scope.filter = filterSettings;//从服务方法中检索设置对象并引入作用域$scope.OrderFilter = 'name';//默认排序//数据对象$scope.courses = [{name: '课程 1',课程类型:'公共'，地区:'北方'}, {name: '课程 2',课程类型:'公共'，地区:'北方'}, {name: '课程 3',courseType: '私人',地区:'北方'}, {name: '链接 4',courseType: '私人',地区:'北方'}, {name: '链接 5',courseType: '私人',地区:'北方'}, {name: '链接 6',课程类型:'公共'，地区:'东南'}, {name: '链接 7',课程类型:'公共'，地区:'东南'}, {name: '链接 8',courseType: '军事',地区:'东南'}, {name: '课程 9',courseType: '私人',地区:'东南'}, {name: '课程 10',courseType: '私人',地区:'东南'}];});app.controller('secondController', function($scope, filterSettings) {$scope.filter = filterSettings;//从服务方法中检索设置对象并引入作用域});app.factory('filterSettings', function() {//过滤默认值var 设置 = {};settings.searchText = '';settings.courseType = {'公开':'公开'，'私人':'私人'，'军事': '军事','度假村':'度假村'};settings.region = {'北': '北','中央':'中央'，'西南': '西南','东南':'东南'};返回设置；});//全局搜索过滤器app.filter('searchFilter', function($filter) {返回函数(项目，搜索过滤器){var isSearchFilterEmpty = true;angular.forEach(搜索过滤器，函数(搜索字符串){if (searchstring != null && searchstring != "") {isSearchFilterEmpty = false;}});如果 (!isSearchFilterEmpty) {var 结果 = [];angular.forEach(项目，功能(项目){var isFound = false;angular.forEach(item, function(term, key) {if (term != null && !isFound) {term = term.toString();term = term.toLowerCase();angular.forEach(搜索过滤器，函数(搜索字符串){searchstring = searchstring.toLowerCase();if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {结果.推(项目)；isFound = true;}});}});});返回结果；} 别的 {退换货品;}}});

body {字体系列:calibri、arial；}h2{字体大小:14pt；字体粗细:粗体；}李{字体系列:快递；}第 {字体粗细:粗体；光标:指针；文本对齐:左；}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.js"></script><div ng-app="app" ng-cloak><section layout="row" flex=""><div ng-controller="mainController" style="margin: 0 20px;"><标签>搜索:<输入 ng-model="filter.searchText"><h2>课程类型</h2><label>公共</label><input type="checkbox" ng-model="filter.courseType.public" ng-true-value="'public'" ng-false-value="'!public'"/>&nbsp;<label>私有</label><input type="checkbox" ng-model="filter.courseType.private" ng-true-value="'private'" ng-false-value="'!private'"/>&nbsp;<label>军事</label><input type="checkbox" ng-model="filter.courseType.military" ng-true-value="'military'" ng-false-value="'!military'"/>&nbsp;<label>度假村</label><input type="checkbox" ng-model="filter.courseType.resort" ng-true-value="'resort'" ng-false-value="'!resort'"/>&nbsp;<小时/><h2>区域</h2><label>北方</label><input type="checkbox" ng-model="filter.region.northern" ng-true-value="'northern'" ng-false-value="'!northern'"/>&nbsp;<label>中央</label><input type="checkbox" ng-model="filter.region.central" ng-true-value="'central'" ng-false-value="'!southern'"/><label>西南</label><input type="checkbox" ng-model="filter.region.southwestern" ng-true-value="'southwestern'" ng-false-value="'!southwestern'"/><label>东南</label><input type="checkbox" ng-model="filter.region.southeastern" ng-true-value="'southeastern'" ng-false-value="'!southeastern'"/><小时/><h2>结果:</h2><table width="100%" cellpadding="5"><tr><th ng-click="OrderFilter='name'">Name</th><th ng-click="OrderFilter='courseType'">课程类型</th><th ng-click="OrderFilter='region'">区域</th></tr><tr ng-repeat="课程中的课程 | filter:filter.searchText | searchFilter:filter.name | searchFilter:filter.courseType | searchFilter:filter.region | orderBy:orderFilter"><td>{{course.name}}</td><td>{{course.courseType}}</td><td>{{course.region}}</td></tr>

<div style="margin: 0 20px;border-left: 1px solid #000">

<div ng-controller="secondController"><div class="search-filter-module">搜索:<br/><input type='search' class="search-filter" ng-model="filter.searchText"/><a title="clear input" ng-show="filter.searchText !=''" class="clear clear-search" ng-click="filter.searchText = ''"><i ng-show="filter.searchText !=''" class="material-icons">&nbsp;清除</i></a>