Question

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

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

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

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

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

Answer 1

我通常会添加ng-click标记：

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

传递给item的{{1}}将是用户选择的{。}}。

Answer 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的单个实例，你可以用任何属性切换隐藏或显示，只要你有你想要的属性的setter和getter访问（如名称和isSelected或任何你想要的）并使它具有双向绑定，如果它被更改为任何地方选择，它是通用的，因为您正在使用的单个实例。

如果您不希望所选值在应用程序中保留，并且只在该页面中（或您正在使用它的任何地方），您也可以使用个别实例

选择和访问ng-repeat中的项目

2 个答案: