I have a search workspace and a set of flags that work correctly with my data inside the controller in Angular JS 1.5.5. I have a 2nd controller with a search box and some Angular content switchers. I want the switches to be attached to the flags, but I don’t know how to connect them with one controller to another, plus the switches are true / false, but the true / false values for the flags do not match true / false, they are strings.
.controller('mainController', function($scope, $route, $routeParams, $location, $http) { // Data object $http({ method: 'GET', url: 'utahgolf.json' }) .success(function (data, status, headers, config) { $scope.courses = data; }) .error(function (data, status, headers, config) { // something went wrong :( }); // Filter defaults $scope.Filter = new Object(); $scope.Filter.courseType = { 'public':'public', 'private':'private', 'military': 'military', 'resort': 'resort' }; $scope.Filter.region = { 'northern':'northern', 'central':'central', 'southwestern': 'southwestern', 'southeastern': 'southeastern' }; // Default order $scope.OrderFilter = 'name'; }) // Global search filter .filter('searchFilter',function($filter) { return function(items,searchfilter) { var isSearchFilterEmpty = true; angular.forEach(searchfilter, function(searchstring) { if(searchstring !=null && searchstring !=""){ isSearchFilterEmpty= false; } }); if(!isSearchFilterEmpty){ var result = []; angular.forEach(items, function(item) { var isFound = false; angular.forEach(item, function(term,key) { if(term != null && !isFound){ term = term.toString(); term = term.toLowerCase(); angular.forEach(searchfilter, function(searchstring) { searchstring = searchstring.toLowerCase(); if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){ result.push(item); isFound = true; } }); } }); }); return result; }else{ return items; } } }) .factory('ser1', function(){ courses = { public: true, private: true, military: true, resort: true, }; return courses; }) .controller('one', function($scope, ser1){ $scope.courses = ser1; }) .controller('two',function($scope, ser1){ $scope.courses = ser1; //console.log($scope.courses); }) .controller('SwitchDemoCtrl', function($scope, ser1) { $scope.data = ser1; $scope.check = function () { //console.log($scope.data); } $scope.message = 'false'; $scope.change = function(cbState) { $scope.message = cbState; //console.log($scope.message); }; })
HTML search page:
<div class="inbox" ng-controller="mainController"> <!-- <div layout="row" layout-align="center center" class="bar"> <input type="text" class="search" ng-model="data.searchString" placeholder="Enter search terms" /> <i class="material-icons search-info" ng-click="showAlert($event)">info</i> </div> --> <label>Search: <input ng-model="searchText"></label> <h2>Course Type</h2> <label>Public</label> <input type="checkbox" ng-model="Filter.courseType.public" ng-true-value="'public'" ng-false-value="'!public'" /> <label>Private</label> <input type="checkbox" ng-model="Filter.courseType.private" ng-true-value="'private'" ng-false-value="'!private'" /> <label>Military</label> <input type="checkbox" ng-model="Filter.courseType.military" ng-true-value="'military'" ng-false-value="'!military'" /> <label>Resort</label> <input type="checkbox" ng-model="Filter.courseType.resort" ng-true-value="'resort'" ng-false-value="'!resort'" /> <hr /> <h2>Region</h2> <label>Northern</label> <input type="checkbox" ng-model="Filter.region.northern" ng-true-value="'northern'" ng-false-value="'!northern'" /> <label>Central</label> <input type="checkbox" ng-model="Filter.region.central" ng-true-value="'central'" ng-false-value="'!southern'" /> <label>Southwestern</label> <input type="checkbox" ng-model="Filter.region.southwestern" ng-true-value="'southwestern'" ng-false-value="'!southwestern'" /> <label>Southeastern</label> <input type="checkbox" ng-model="Filter.region.southeastern" ng-true-value="'southeastern'" ng-false-value="'!southeastern'" /> <hr /> <h2>Results:</h2> <div ng-repeat="course in courses | 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 courses-name">{{course.name}}</span> <span class="md-subhead">{{course.city}}, {{course.state}}</span> <span class="md-subhead">{{course.coursetype}} | {{course.holes}} 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 courses-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> </div> </div> </div>
Material Design switches and 2nd search box:
<div ng-controller='two'> <div class="search-filter-module"> Search:<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> </div> Course Type: <md-switch ng-model="courses.public" aria-label="Switch 1" ng-click="check()"> Public </md-switch> <md-switch ng-model="courses.private[![enter image description here][1]][1]" aria-label="Switch 2" ng-click="check()"> Private </md-switch> <md-switch ng-model="courses.military" aria-label="Switch 3" ng-click="check()"> Military </md-switch> <md-switch ng-model="courses.resort" aria-label="Switch 4" ng-click="check()"> Resort </md-switch> Region: <md-switch ng-model="courses.northern" aria-label="Switch 5" ng-click="check()"> Northern </md-switch> <md-switch ng-model="courses.central" aria-label="Switch 6" ng-click="check()"> Central </md-switch> <md-switch ng-model="courses.southwestern" aria-label="Switch 7" ng-click="check()"> Southwest </md-switch> <md-switch ng-model="courses.southeastern" aria-label="Switch 8" ng-click="check()"> Southeast </md-switch> </div>