Question

我问是否可以像角度

那样做某事

<div ng-app="app">
<div  ng-controller="mainController">
    <ul ng-repeat="movie in movies |searchFilter:Filter.genre  | searchFilter:Filter.name |searchFilter:Filter.pic  ">
        <li>{{movie.name}}</li>
    </ul>
    <h2>genre</h2>
    <div>
     <label>Comedy </label><input  type="checkbox" ng-model="Filter.genre.Comedy" ng-true-value="Comedy"  data-ng-false-value=''/><br/>
    </div>

    <h2>PIC</h2>
    <label>aa</label><input  type="checkbox" ng-model="Filter.pic.aa" ng-true-value="ciao"  data-ng-false-value=''/><br/>
<h2>Name</h2>
      <label>Shrek</label><input  type="checkbox" ng-model="Filter.name.Shrek" ng-true-value="The God"  data-ng-false-value=''/><br/>
</div>
</div>

我正在为不同字段（尺寸，名称，流派）创建过滤器复选框我有一系列可用的尺寸，名称和流派。问题出在ng-model上，我试着把它写成＆＃34; Filter.genre.genre.name＆＃34;要么＆＃34;过滤器[＆＃34;类型＆＃34 + genre.name]＆＃34;还有＆＃34; Filter.genre [genre.name]＆＃34;但仍然不行。 js.file是

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

app.controller('mainController', function($scope) {
    $scope.movies = [{name:'Shrek', genre:'Comedy',pic:"cc"},
                     {name:'Die Hard', genre:'Comedy',pic:"aa"},
                     {name:'The Godfather', genre:'Drama',pic:"ciao"},
                     {name:'The Godher', genre:'Comedy',pic:"lel"}];

    $scope.genres = [{name:"Comedy"},{name:"Action"},{name:"Drama"}];



});


app.filter('searchFilter',function($filter) {
        return function(items,searchfilter) {
             var isSearchFilterEmpty = true;
            //searchfilter darf nicht leer sein 
              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.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {      
                                    searchstring = searchstring.toLowerCase();
                                    if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
                                       result.push(item);
                                        isFound = true;
                                        // console.log(key,term);
                                    }
                                });
                         }
                            });
                       });
            return result;
        }else{
        return items;
        }
    }
  });

如果我为场景喜剧，动作和戏剧制作3个不同的标签，其中ng-models称为

NG-模型=＆＃34; Filter.genre.Comedy＆＃34; ; NG-模型=＆＃34; Filter.genre.Action＆＃34;和ng-model =＆＃34; Filter.genre.Drama＆＃34;

它有效，但如果我尝试将其写入ng-repeat，它就无法工作。我希望更清楚

Answer 1

在此示例中，我尝试通过更改页面的Model来处理您的问题。

我们有：

电影列表array => $scope.movies = []
动态过滤器array => $scope.genres = [], $scope.years = []或更多

我们的目标：

创建动态过滤器以在movies
中进行搜索

我们的工作

$scope.filterHandler = function (key, value) {}

当用户开始在input或select上搜索时，此功能会通过发送object和key来帮助我们创建一个过滤器value是{key:value}

$scope.searchTypeHandler = function (type, dependTo) {}

当我们的过滤器有一些array，例如genre genres dropdown select为array时运行，此函数可帮助我们返回依赖于var app = angular.module("app", []); app.controller("ctrl", [ "$scope", function($scope) { //your options $scope.movies = [{ name: 'Shrek', genre: 'Comedy', year: 2000 }, { name: 'Die Hard', genre: 'Action', year: 2000 }, { name: 'The Godfather', genre: 'Drama', year: 2015 }, { name: 'The Godher', genre: 'Comedy', year: 2017 } ]; $scope.genres = [{ name: "Comedy" }, { name: "Action" }, { name: "Drama" } ]; $scope.years = [{ name: 2000 }, { name: 2015 }, { name: 2017 } ]; // $scope.filter = {} $scope.filterHandler = function(key, value) { var object = {}; object[key] = value; $scope.filter["find"] = object; }; $scope.searchTypeHandler = function(type, dependTo) { $scope.filter = {}; $scope.filter.searchType = type; $scope.filter.options = undefined; if (dependTo != null) { $scope.filter.options = $scope[dependTo]; } }; //default $scope.searchTypeHandler("name"); } ]);的{{1}}过滤

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container" ng-app="app" ng-controller="ctrl">
  <div class="page-header">
    <div class="row">
      <div class="col-lg-12">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <h4>Movies</h4>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                By {{filter.searchType}}
                                <span class="caret"></span>
                            </button>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a ng-click="searchTypeHandler('genre', 'genres')">Filter By Genre</a></li>
                <li><a ng-click="searchTypeHandler('name', null)">Filter By Name</a></li>
                <li><a ng-click="searchTypeHandler('year', 'years')">Filter By Year</a></li>
              </ul>
            </div>
            <input ng-hide="filter.options" type="text" class="form-control" ng-model="filter.query" ng-change="filterHandler(filter.searchType, filter.query)">

            <select ng-show="filter.options" class="form-control" ng-model="filter.option" ng-change="filterHandler(filter.searchType, filter.option)" ng-options="option.name as option.name for option in filter.options"></select>
          </div>
          <!-- /input-group -->
        </div>
      </div>
    </div>
  </div>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="movie in movies | filter: filter.find">
      {{movie.name}} - <label class="label label-info">Ggenre: {{movie.genre}}</label> - <label class="label label-default">Year: {{movie.year}}</label>
    </li>
  </ul>

</div>

＆＃13;

{{1}}

＆＃13;

ng-model into ng-repeat Angularjs

1 个答案: