1

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.

cboe
  • 469
  • 1
  • 9
  • 25
  • What do you mean by selectable? Also having a selected property would make your life a lot easier with angular. IMO you should make a model (provider) for this, and then you can have a toJSON or something to clean it up for sending/receiving. Angular is great for the front end models. – ajmajmajma Sep 14 '15 at 18:18
  • You want to build a breadcrumbs, guided navigation and result set, I did one in knockout, not in angular yet, but this isn't a trivial function, it's a system, what have you tried? You will need to build a filters list, a tags list, a result list and build events for when adding/removing a filter – Luc Laverdure Sep 14 '15 at 18:44
  • by selectable i just mean click it to select it. The problem with adding a selected property to each item, the list could be used twice on the same site. The whole data in resource.items comes from a service, even if I had a selected property on the items, if a selected item is filtered out, how would I detect that change and set selected to false? – cboe Sep 14 '15 at 19:02
  • Use a model for the group of selections then individual item itself and use 1 instance of the list model. This will solve your problem. – ajmajmajma Sep 14 '15 at 19:05
  • @LucLaverdure breadcrumbs and guided navigation? All I want is to have a list of items (or their ids or some reference) that are both selected and inside filteredItems – cboe Sep 14 '15 at 19:16
  • @ajmajmajma I don't understand your wording completely, care to elaborate a bit more and post it as a full answer? :) – cboe Sep 14 '15 at 19:21
  • @cboe ok i gave it a shot, let me know if you have any questions! – ajmajmajma Sep 14 '15 at 19:36

2 Answers2

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.

Brent Washburne
  • 12,904
  • 4
  • 60
  • 82
0

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)

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133