1
У меня есть рабочее поле поиска и набор флажков, которые правильно работают с моими данными внутри контроллера в Angular JS 1.5.5. У меня есть второй контроллер с полем поиска и некоторыми переключателями углового материала. Я хочу, чтобы переключатели привязывались к флажкам, но не знаю, как их связать с одним контроллером на другой, плюс переключатели являются true/false, но значения true/false для флажков не соответствуют true/false, они являются строками.Угловой материал md-switch и поиск входных сигналов в одном контроллере на другой контроллер
.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-поиск Страницы:
<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>
материал выключатели Дизайна и второе окно поиска:
<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>
В расчистке поиска текста с помощью кнопки вы не» t хотите установить его в значение «null». Он должен быть установлен в пустую строку. Я только что обновил код, чтобы исправить это. –
Просто обновил ссылку JSFiddle с исправлением ошибки текстового текста. –
K Scandrett: Я не могу пометить вас из-за пространства на ваше имя, я думаю. Спасибо за подсказку о значениях true/false. Да, я могу заставить его работать в ОДНОМ контроллере. Коммутаторы находятся в другом контроллере, а не в основном контроллере. – mediaguru