javascript - Angular Material md-switch 并搜索一个 Controller 中的输入到另一个 Controller

Question

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

 .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'" />&nbsp;
                <label>Private</label>
                <input type="checkbox" ng-model="Filter.courseType.private" ng-true-value="'private'" ng-false-value="'!private'" />&nbsp;
                <label>Military</label>
                <input type="checkbox" ng-model="Filter.courseType.military" ng-true-value="'military'" ng-false-value="'!military'" />&nbsp;
                <label>Resort</label>
                <input type="checkbox" ng-model="Filter.courseType.resort" ng-true-value="'resort'" ng-false-value="'!resort'" />&nbsp;
                <hr />
                <h2>Region</h2>
                <label>Northern</label>
                <input type="checkbox" ng-model="Filter.region.northern" ng-true-value="'northern'"  ng-false-value="'!northern'" />&nbsp;
                <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 开关和第二个搜索框:

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

Answer 1

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

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

var app = angular.module('app', ['ngMaterial']);

app.controller('mainController', function($scope, filterSettings) {

  $scope.filter = filterSettings; // retrieve settings object from service method and bring into scope    
  $scope.OrderFilter = 'name'; // Default sort order

  // Data object
  $scope.courses = [{
    name: 'Course 1',
    courseType: 'Public',
    region: 'Northern'
  }, {
    name: 'Course 2',
    courseType: 'Public',
    region: 'Northern'
  }, {
    name: 'Course 3',
    courseType: 'Private',
    region: 'Northern'
  }, {
    name: 'Links 4',
    courseType: 'Private',
    region: 'Northern'
  }, {
    name: 'Links 5',
    courseType: 'Private',
    region: 'Northern'
  }, {
    name: 'Links 6',
    courseType: 'Public',
    region: 'Southeastern'
  }, {
    name: 'Links 7',
    courseType: 'Public',
    region: 'Southeastern'
  }, {
    name: 'Links 8',
    courseType: 'Military',
    region: 'Southeastern'
  }, {
    name: 'Course 9',
    courseType: 'Private',
    region: 'Southeastern'
  }, {
    name: 'Course 10',
    courseType: 'Private',
    region: 'Southeastern'
  }];
});

app.controller('secondController', function($scope, filterSettings) {
  $scope.filter = filterSettings; // retrieve settings object from service method and bring into scope
});

app.factory('filterSettings', function() {

  // Filter defaults
  var settings = {};
  settings.searchText = '';
  settings.courseType = {
    'public': 'public',
    'private': 'private',
    'military': 'military',
    'resort': 'resort'
  };
  settings.region = {
    'northern': 'northern',
    'central': 'central',
    'southwestern': 'southwestern',
    'southeastern': 'southeastern'
  };

  return settings;
});

// Global search filter
app.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;
    }
  }
});

body {
  font-family: calibri, arial;
}

h2 {
  font-size: 14pt;
  font-weight: bold;
}

li {
  font-family: courier;
}

th {
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

<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;">
      <label>Search:
        <input ng-model="filter.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'" />&nbsp;
      <label>Private</label>
      <input type="checkbox" ng-model="filter.courseType.private" ng-true-value="'private'" ng-false-value="'!private'" />&nbsp;
      <label>Military</label>
      <input type="checkbox" ng-model="filter.courseType.military" ng-true-value="'military'" ng-false-value="'!military'" />&nbsp;
      <label>Resort</label>
      <input type="checkbox" ng-model="filter.courseType.resort" ng-true-value="'resort'" ng-false-value="'!resort'" />&nbsp;
      <hr />
      <h2>Region</h2>
      <label>Northern</label>
      <input type="checkbox" ng-model="filter.region.northern" ng-true-value="'northern'" ng-false-value="'!northern'" />&nbsp;
      <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>
      <table width="100%" cellpadding="5">
        <tr>
          <th ng-click="OrderFilter='name'">Name</th>
          <th ng-click="OrderFilter='courseType'">Course Type</th>
          <th ng-click="OrderFilter='region'">Region</th>
        </tr>
        <tr ng-repeat="course in courses | 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>
      </table>
    </div>
    <div style="margin: 0 20px;border-left: 1px solid #000">
    
    </div>
    <div ng-controller="secondController">
      <div class="search-filter-module">
        Search:
        <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;clear</i></a>
      </div>
      Course Type:
      <md-switch ng-model="filter.courseType.public" aria-label="Switch 1" ng-true-value="'public'" ng-false-value="'!public'">
        Public
      </md-switch>
      <md-switch ng-model="filter.courseType.private" aria-label="Switch 2" ng-true-value="'private'" ng-false-value="'!private'">
        Private
      </md-switch>
      Region:
      <md-switch ng-model="filter.region.northern" aria-label="Switch 5" ng-true-value="'northern'" ng-false-value="'!northern'">
        Northern
      </md-switch>
      <md-switch ng-model="filter.region.southeastern" aria-label="Switch 6" ng-true-value="'southeastern'" ng-false-value="'!southeastern'">
        Southeast
      </md-switch>
    </div>
  </section>
</div>

这是 JsFiddle 中的相同代码:http://jsfiddle.net/dtrz3060/3/