0

我問是否可以做一些事情的,在角NG-型號爲NG-重複Angularjs

<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模型上,我試圖把它寫成「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; 
     } 
    } 
    }); 

如果我使3個不同的標籤領域喜劇,動作和劇情與NG-模型稱爲

NG-模型= 「Filter.genre.Comedy」; ng-model =「Filter.genre.Action」and ng-model =「Filter.genre.Drama」

它的工作,但它不工作,如果我試圖寫入ng重複。我希望更清晰

+0

你要問是否有可能實現與ngrepeat複選框? – Neha

+0

請編輯該問題。你根本不清楚你的問題。 –

+0

顯示你的控制器的一些代碼 – nullwriter

回答

0

在這個示例中,我嘗試通過更改頁面的Model來處理您的問題。

我們:

  • 電影的名單array => $scope.movies = []
  • 動態過濾器array => $scope.genres = [], $scope.years = []以上

我們的目標:

創建d ynamic過濾器在movies

搜索我們做什麼

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

運行時,用戶開始inputselect搜索,該功能幫助我們創建一個過濾器object通過發送keyvalue哪些結果是{key:value}

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

運行時,我們的過濾器有一些array例如genre具有genresdropdown 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>