For these sort of tasks I'd recommend underscore.js. Either diff() or
filter() http://underscorejs.org/. Even if you use a directive, you have
to write the logic to perform the task, but no, don't use a directive,
write smart functions and use cool tools like underscore.
Then if you are using $http, something like:
$scope.myItems = [];
$scope.availableItems = [];
$http.get("/api/my-items").then(function(myItems){
$scope.myItems = myItems;
getAvail();
});
function getAvail(){
$http.get("/api/avail-items").then(function(avaiItems){
//if primitive values use diff()
$scope.availableItems = _.diff(avaiItems, $scope.myItems);
//or if it's an array of objects and say you can identify by id
field, then here's an example with filter()
var ids = _.pluck($scope.myItems, 'id' ); //creates an array of ids
from myItems
$scope.availableItems = _.filter(avaiItems, function(item){
//now we just check the index
return _,indexOf(ids, item.id) == -1; //returns true if index
not found so will be in the final item, false if found so will be eliminated
});
});
}
Though, I might do it a third way and use an attribute on availableItems
for whether or not the item is in myList.
Hope that gives you some direction.
On Monday, July 28, 2014 1:40:42 PM UTC-6, Skattabrain wrote:
>
> AngularJS noob here with a design question.
>
> I have 2 lists... one is a list of items for a specific group. Let's call
> the group "My Items". The 2nd list is a master list of all the items
> available - "Available Items".
>
> This 2nd list can be changed out for other lists. So you might have
> "Available Items of Type 1" and "Available Items of Type 2" etc...
>
> I show the "Available Items" on the left and the "My Items" on the right.
>
> If you visualize a shopping cart system where the available items are on
> left and you are moving them into your "cart", that's a good way to
> visualize this.
>
> $scope.myItems = []
> and
> $scope.availableItems = []
>
> So I start off with 2 ajax calls... 1 for 'my items' and the 2nd call gets
> the currently selected 'available items' lists.
>
> The available items on the left may include items that are in 'my list'
> but they should not be shown. I have a relatively in-efficient loop I run
> through to see if the item is in "my items" and if it isn't, I push it to
> the scope - $scope.availableItems
>
> There is the issue that the 'myItems' list has to be completed before i
> call for the availableItems in case myItems isn't complete... as the
> comparison will not be right.
>
> I then have tools to move selected items in and out of the myItems.
>
> Is there a better way though the use of a directive that will watch for
> changes to myItems and remove/add them to the availableItems?
>
> I've been dropped into AngularJS with a relatively complicated task. These
> lists involve thousands of items and we chose angular because i can throw
> 15,000 items into a scope and as long as I have paging setup... i can
> filter and sort the whole thing easily, that's working amazingly well.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
