收集已過濾的ng-repeat數據以用於控制器

Question

我正嘗試在響應式網格中構建一個圖片庫，數據從Mongo DB下載。來自db的數據就是這種形式。名稱，圖像，關鍵字，生物，參考」，可搜索，

我開始用NG-重複顯示基於圖片的關鍵字類別選擇複選框，這似乎很好地工作。

p CATEGORIES: 
     span.formgroup(data-ng-repeat='category in mongoController.catData') 
      input.checks(type='checkbox', ng-model='mongoController.filter[category]') 
      | {{category}} 

這裏工廠進行排序，並確定關鍵字複選框：

   getCategories: function (cat) { 
        return (cat || []).map(function (pic) { 
         return pic.keyword; 
        }).filter(function (pic, idx, array) { 
         return array.indexOf(pic) === idx; 
        }); 
       } 

從那裏我過濾的NG-重複基於該複選框選擇顯示圖片，和/或它也是行之有效的搜索領域

。個

input.form-control.input-med(placeholder="Search" type='text', ng-model="search.searchable") 
    br 
    div.light.imageItem(data-ng-repeat="picture in filtered=(mongoController.allData | filter:search | filter:mongoController.filterByCategory)") 
     a(data-toggle="modal", data-target="#myModal", data-backdrop="static", ng-click='mongoController.selectPicture(picture)') 
      img(ng-src='../images/{{picture.image}}_tn.jpg', alt='Photo of {{picture.image}}') 
    p Number of results: {{filtered.length}} 

功能，顯示畫面列表：

//Returns pictures of checkboxes || calls the noFilter function to show all 
    mongoController.filterByCategory = function (picture) { 
     return mongoController.filter[picture.keyword] || noFilter(mongoController.filter); 
    }; 

    function noFilter(filterObj) { 
     for (var key in filterObj) { 
      if (filterObj[key]) { 
       return false; 
      } 
     } 
     return true; 
    } 

如果單擊一個模式對話框的所有輸入字段，您可以編輯圖像的特定字段的彈出的圖片之一。

我真正掙扎的部分是如何從過濾的ng-repeat中收集可用數據以便在控制器中使用，因此當模式框啓動時，可以向右或向左滾動其他符合標準的圖片的搜索。

任何建議都會有幫助，甚至爲什麼你會這樣做？

Answer 1

當您聲明過濾圖片的ng-repeat時，您的filtered變量屬於當前的$ scope（我無法從問題中推斷出它，因爲它站起來）。 （即使用<elem ng-repeat="picture in ctrl.filtered = (ctrl.data | filter1 | filterN)"/>）

例子：你可以在filtered變量爲特定的控制器使用控制器作爲語法關聯（also in jsfiddle）

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

 
mod.controller('ctrl', function() { 
 
    var vm = this; 
 
    vm.data = ['alice', 'bob', 'carol', 'david', 'ema']; 
 

 
    vm.onbutton = function() { 
 
    // access here the filtered data that mets the criteria of the search. 
 
    console.log(vm.filtered); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="ctrl as vm"> 
 
    <input ng-model="search" type="text" /> 
 
    <p data-ng-repeat="item in vm.filtered = (vm.data | filter:search)"> 
 
    {{item}} 
 
    </p> 
 
    <p>Items: {{vm.filtered.length}}</p> 
 
    <button ng-click="vm.onbutton()">Show me in console</button> 
 
</div>