Question

我正在尝试在响应式网格中构建一个图片库，其数据来自Mongo DB。来自db的数据采用这种形式。名称，图像，关键字，生物，参考＆＃34;，可搜索，

我从ng-repeat开始，根据图片关键字显示类别选择复选框。这似乎工作正常。

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

以下是对关键字复选框进行排序和识别的工厂：

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

从那里我过滤ng-repeat以显示基于复选框选择的图片，和/或也适用的搜索字段。

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

显示图片列表的功能：

Promise

如果单击其中一个图片，将弹出一个模式框，其中包含您可以编辑图像特定字段的所有输入字段。

我真正努力的部分是如何从过滤后的ng-repeat中收集可用数据以便在控制器中使用，这样当模态框启动时，我可以向右或向左滚动其他符合条件的图片搜索。

任何建议都会有所帮助，甚至为什么你这么做呢？

Answer 1

当您声明过滤图片的ng-repeat时，您的filtered变量属于当前的$ scope（我无法从问题中推断出它，因为它代表）。您可以使用Controller As语法将filtered变量关联到特定控制器:(即使用<elem ng-repeat="picture in ctrl.filtered = (ctrl.data | filter1 | filterN)"/>）

示例：（also in jsfiddle）

＆＃13;

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

＆＃13;

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

＆＃13;

收集过滤的ng-repeat数据以在控制器中使用

1 个答案: