CODEWITHSUNDEEP
javascriptangularjs
Tomc-s
Tomc-s

Reputation: 33

collect filtered ng-repeat data to use in controller

I am trying to build a picture library in a responsive grid with data coming down from a Mongo DB. Data from db is in this form. name, image, keyword, bio, reference", searchable,

I start with an ng-repeat to display category selection checkboxes based on the picture keywords. This seems to work fine. 

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

Here is the factory that sorts and identifies the keyword checkboxes:

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

From there I filter an ng-repeat to display pictures based on the checkbox selection, and/or a search field which works well also. 

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

Functions to display picture lists:

    //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;
    }

If you click one of the pictures a modal box pops up with all of the input fields where you can edit image specific fields.

The part I am really struggling with is how to gather the usable data from the filtered ng-repeat to use in the controller so when the modal box is up I can scroll right or left through the other pictures that met the criteria of the search.

Any suggestions would help, even why the hell are you doing it this way?

Upvotes: 1

Views: 106

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15667

When you declare the ng-repeat that filters the pictures, your filtered variable belongs to the current $scope (which I cannot infer from the question, as it stands). You could associate the filtered variable to a specific controller by using Controller As syntax: (i.e. using <elem ng-repeat="picture in ctrl.filtered = (ctrl.data | filter1 | filterN)"/>)

Example: (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>

Upvotes: 1

Related Questions