Selecting and accessing items in ng-repeat

Question

I have an array of objects in a service that I want to display in a view like this

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

I want these objects to be selectable which is the easy part. Then I'd need to get the count of the selected items and be able to iterate over all of them to process/change data.

What is the best method to save and access the selected items?

Note that the selected items could change, for example a selected item could fall away due to changed filters. Also, I don't want to set a selected property on the objects in the array directly - the array of objects is in a service and used throughout the app in many lists and I don't want to "clean up" the selected property for each view.

Answer 1

You can take the object oriented approach and create models to do your work for you basically. I've been in the same scenario and it's worked for me, plus I think it's a good tool angular gives you to work with. You would have a listModel and an itemModel - the list model would have a list of your single item itemModels. The list model you would use 1 instance of between where ever you are using this list of items. Take this with a grain of salt because this is just an example.

So you'd have the 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;
}
]);

Notice it injects singleItemModel - this would be the individual item model it would look the same except it would have all your information on creation with what you pass it like

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

So then you would have a single instance of the listModel you would use across your app, you can toggle a hide or show with whatever property, as long as you have setters and getters for your properties you want to access (like the name and isSelected or whatever you want) and have it 2 way bound, if it is changed to selected anywhere, it is universal because of the single instance you are using.

You can also you individual instances if you dont want the selected values to persist across the app, and only in that one page (or where ever you are using it)

Answer 2

I usually include a ng-click tag:

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

The item passed to select_item() will be the one the user selected.