在 ng-repeat 中选择和访问项目答案

【问题标题】：Selecting and accessing items in ng-repeat在 ng-repeat 中选择和访问项目
【发布时间】：2015-12-10 19:48:05
【问题描述】：

我有一个服务中的对象数组，我想在这样的视图中显示

<li ng-repeat="item in filteredItems = (resource.items | filter:multipleFilters...">
    <span class="title">{{item.escaped_name}}</span>
</li>

我希望这些对象是可选的，这很容易。然后我需要获取所选项目的数量并能够遍历所有项目以处理/更改数据。

保存和访问所选项目的最佳方法是什么？

请注意，所选项目可能会发生变化，例如，所选项目可能会因过滤器更改而消失。此外，我不想直接在数组中的对象上设置选定属性 - 对象数组在服务中并在整个应用程序中的许多列表中使用，我不想“清理”选定的属性每个视图。

【问题讨论】：

可选择是什么意思？还拥有一个选定的属性将使您的生活更轻松。 IMO 你应该为此制作一个模型（提供者），然后你可以有一个 toJSON 或其他东西来清理它以进行发送/接收。 Angular 非常适合前端模型。
你想构建一个面包屑、引导式导航和结果集，我在淘汰赛中做了一个，还没有在 Angular 中，但这不是一个微不足道的功能，它是一个系统，你试过什么？添加/删除过滤器时，您需要构建过滤器列表、标签列表、结果列表和构建事件
可选择我的意思是点击它来选择它。将选定属性添加到每个项目的问题，该列表可以在同一站点上使用两次。 resource.items 中的全部数据来自一个服务，即使我在项目上有一个 selected 属性，如果一个选定的项目被过滤掉，我将如何检测该更改并将 selected 设置为 false？
对选择组使用模型，然后使用单个项目本身，并使用列表模型的 1 个实例。这将解决您的问题。
@LucLaverdure 面包屑和引导导航？我想要的只是有一个项目列表（或它们的 id 或一些参考），这些项目都被选中并在 filterItems 中

标签： angularjs filter angularjs-ng-repeat ng-repeat

【解决方案1】：

我通常包含一个ng-click 标签：

<li ng-repeat="item in ..." ng-click="select_item(item)">

传递给select_item() 的item 将是用户选择的那个。

【讨论】：

【解决方案2】：

您可以采用面向对象的方法并创建模型来为您完成工作。我一直处于同样的情况，它对我有用，而且我认为它是一个很好的工具，角度可以让你使用。您将拥有一个 listModel 和一个 itemModel - 列表模型将拥有您的单个 itemModel 的列表。您将在使用此项目列表的任何位置之间使用 1 个实例的列表模型。对此持保留态度，因为这只是一个例子。

所以你有 listModel

.factory('listModel', [singleItemModelInject,
function(singleItemModel) {

    function listModel(items) {
        this.items = _.map(items, listModel.create);
    }

    listModel.create = function(value, name) {
        return new listModel(value);
    };

    listModel.prototype = {
        get whatever() {

        },
        set whatever() {

        }
    }

    return listModel;
}
]);

注意它注入了singleItemModel - 这将是单个项目模型，它看起来是一样的，除了它会包含你的所有创建信息，就像你传递的一样

.factory('singleItemModel', [whateverYouNeedInjected,
function() {

   function singleItemModel(item) {
    this.name = item.name;
    //default to not selected
    this.selected = item.selected || false;
    this.whateverElseYouNeed = item.whateverElseYouNeed
  } 

  singleItemModel.create = function(value) {
    return new singleItemModel(value);
  };

因此，您将拥有一个 listModel 的单个实例，您将在您的应用程序中使用，您可以使用任何属性切换隐藏或显示，只要您有要访问的属性的设置器和获取器（喜欢名称和 isSelected 或任何你想要的）并有两种方式绑定，如果它被更改为在任何地方选择，它是通用的，因为你使用的是单个实例。

如果您不希望所选值在应用程序中持续存在，并且仅在该页面（或您使用它的任何地方）中，您也可以单独实例

【讨论】：