收集过滤后的ng重复数据以在控制器中使用

collect filtered ng-repeat data to use in controller

本文关键字：控制器 数据 过滤 ng      更新时间：2023-09-26

我正试图用Mongo 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重复中收集可用数据，以便在控制器中使用，这样当模式框打开时，我可以在符合搜索标准的其他图片中向右或向左滚动。

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

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

示例：（也在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>

相关文章：