Better way to do same in angular JS

Question

When the tobeclicked list is clicked it takes the data from that and pastes in the find empty list. Where it actually needs to find an empty list and update it. Values and list will have images in the real. So when image is clicked it finds empty list and clones there. I can't change the structure of empty list since it will have empty borders of size of image to be cloned. So user can know where he is adding.

HTML :

<div ng-app='myModule'>
    <div class="tobeclicked">
        <ul>
            <li thisclicked data-value="img1">img 1</li>
            <li thisclicked data-value="img2">img 2</li>
        </ul>
    </div>
    <br>
    <div class="find-empty">
        <ul>
            <li class="empty" data-value=""></li>
            <li class="empty" data-value=""></li>
        </ul>
    </div>
</div>

JS

var myModule = angular.module('myModule', []);
myModule.directive("thisclicked", function () {
    var thisclicked = function(scope,element,attrs) {
        element.bind('click',function(){
            var empty = $('.find-empty').find('.empty').first();
            empty.html(element.html());
            empty.attr('data-value',attrs.value);
            empty.removeClass('empty');
        });
    };
    return thisclicked;
});

Fiddle (http://jsfiddle.net/CQzu5/) is rough demo of what I want to do. Hopefully there is an angular way to do the same. (Note the fiddle is not the actual code just the example of what I want to do. Actual code has directive calling controller so data is basically fetched in a controller. I am not sure if this a correct way to do this but I'm open to suggestion.

This images should help too (real application):

enter image description here

How connected is the image-list and the empty-list in terms of the dom? You could just create a directive that wraps both the empty and full dom and have data stored in the scope of that directives and work that way — dchhetri, Nov 27 '13 at 19:11
As Emmentaler implied, you're not [thinking the angular way](http://stackoverflow.com/q/14994391/697154) but rather the jquery one. That said, I'm not really sure what you're trying to do, but have a look at this simple example, maybe it wil help: http://jsbin.com/uHozIrAz/1/ — Yoshi, Nov 27 '13 at 19:16
@user814628 Image list is one controller that uses factory to fetch all the images. And the Empty list another controller with its own scope. Both controller are communicating with each other through a service ( factory ). Is this an answer you were expecting? — kishanio, Nov 27 '13 at 19:20
@Yoshi yes I'm actually trying to figure out an angular way to do this. So jsbin seems quite valid do i use it.? I mean do i need to follow anything else to get it right? — kishanio, Nov 27 '13 at 19:22
@Yoshi what if i want to keep collection generic or hardcoded to dom? cuz number of elements can be 10/20 depends on page — kishanio, Nov 27 '13 at 19:33

score 0 · Answer 1 · edited Aug 26 '17 at 14:51

0

I would not use the DOM to store your data. Access it from a controller via a service . Use two lists: one with the base data and one with the expandable "selected data. This opens up the ability to use ng-repeat on the list for each group.

<html ng-app='myModule'>
  <div  ng-controller='main'>
    <div>
      <ul>
        <li ng-repeat="item in itemService.pickedItems">{{description}}</li>
      </ul>
    </div>
    <br>
    <ul>
      <li ng-repeat="item in itemService.items" onclick='addToPicked({{item}})'>{{description}}</li>
    </ul>
  </div>
</html>

And the controller

function main($scope, itemService) {



  $scope.addToPicked = function(item) {
   itemService.addToPicked(item);
  };

}

Now a service referred to by the controller

var myModule = angular.module('myModule', []);
myModule.factory('itemService', function() {
  var itemService= {};
  itemService.pickedItems = [];  //
  itemService.items =  [
    {description:'item 1', imageName:'item1.jpeg'},
    {description:'item 2', imageName:'item2.jpeg'},
    {description:'item 3', imageName:'item3.jpeg'} ];


  itemService.addToPicked = function(item) {
   picKedItems.push(item);
  };
  return itemService;
});

This means that your app will keep one copy of the items even if they exist across multiple controllers.

edited Aug 26 '17 at 14:51

FelixSFD

6,052
10
43
117

answered Nov 27 '13 at 19:04

Nathaniel Johnson

4,731
1
42
69

Yes this seems valid suggestion so basically each ov my image will have a flag associated with it if its selected, but what if user wants to select same image twice? – kishanio Nov 27 '13 at 19:07
Good point, you may need a separate list to store the selected items in. Then you can just append new items to the selected list. I can mocj this up for you if you want though it won't be fully functional. – Nathaniel Johnson Nov 27 '13 at 19:10
Thanks for your reply. I do have same structure. Everything is stored in scope. What my trouble is the empty list i have has to be quite generic that will be available to users on page load with empty borders. Also number of empty list varies. Am i making sense here l0l? – kishanio Nov 27 '13 at 19:27
By generic, do you mean that the list may be viewed before angular re-renders the page? I guess I am not understanding why a format css issue effects how you structure the controller. Maybe you can explain more. – Nathaniel Johnson Nov 27 '13 at 19:34
http://jsbin.com/uHozIrAz/1 this is from above comments. something exactly similar to this just one improvement here cuz collection has 2 undefined elements in the controller i want it to fetch total undefined elements from dom when page loads. Because i have 2 pages one with 10 empty image list and another 20 so if i define this in controller then its kinda bad don't yuh think so if it can figure this out from dom then can act accordingly. – kishanio Nov 27 '13 at 19:38
" i want it to fetch total undefined elements from dom when page loads" I think that this is where your problem is. Is your server code writing out the individual
elements? If so, there may be a problem in that the Angular way is to load that data via a service and let the client render it. If you have two separate scopes, you have to find the relationship between them and use $parent or whatever to change one from the other, which is considered bad practice. Better to use a service that stores the lists rather than doing it in the controller.

Nathaniel Johnson

Nov 27 '13 at 19:47

I guess what I am saying is move the `itemList` and 'selectedItems' into a single object accessible via a Angular service. – Nathaniel Johnson Nov 27 '13 at 19:48

Yes server writes

, our application is not entire angular only part that uses angular is fetching images < pagination > and another this. Also there are 2 different controller yes one images controller and another this empty list controller communication between both is done using service. Just only part I'm finding tricky is this above problem.

– kishanio Nov 27 '13 at 19:55

Better way to do same in angular JS

1 Answers1