ng-model 到 ng-repeat Angularjs

Question

我在问是否有可能在 angular 中做一些事情

<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 上，我尝试将其写为“Filter.genre.genre.name”或 "Filter["genre"+genre.name]" 和 "Filter.genre[genre.name]" 但还是不行。 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;
        }
    }
  });

如果我使用名为

的 ng-models 为喜剧、动作和戏剧领域制作 3 个不同的标签

ng-model="Filter.genre.Comedy" ; ng-model="Filter.genre.Action" 和 ng-model="Filter.genre.Drama"

它可以工作，但如果我尝试将它写入 ng-repeat 它将不起作用。我希望更清楚

Answer 1

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

我们有：

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

我们的目标：

创建一个动态过滤器来搜索movies

我们的工作

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

当用户开始搜索input 或select 时运行，此函数通过发送key 和value 来帮助我们创建过滤器为object，结果为{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");


  }
]);

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