Friday, May 10, 2024
Homepage · json
 Popular · Latest · Hot · Upcoming
16
rated 0 times [  21] [ 5]  / answers: 1 / hits: 18960  / 10 Years ago, sun, april 6, 2014, 12:00:00

I have a list of photographs being generated like the following snippet. Basically this would render a table like structure, with each photo being like a cell in this table. The ID of each photo like for example 1D means that the photo is in the first row of the table and in the 4th/D column.



<ul>

   <li class=row>

      <ul>

            <li class=photo id=photo-1A>1A</li>

            <li class=photo id=photo-1B>1B</li>

            <li class=photo id=photo-1C>1C</li>

            <li class=photo id=photo-1D>1D</li>

            <li class=photo id=photo-2A>2A</li>

            <li class=photo id=photo-2B>2B</li>

            <li class=photo id=photo-2C>2C</li>

            <li class=photo id=photo-2D>2D</li>

            <li class=photo id=photo-3A>3A</li>

            <li class=photo id=photo-3B>3B</li>

            <li class=photo id=photo-3C>3C</li>

            <li class=photo id=photo-3D>3D</li>

      </ul>

   </li>

</ul>


I have a JSON which includes whether the photo is available or not. Basically the JSON string is something along these lines:



[{row:1,position:A,available:true},{row:1,position:B,available:false},{row:1,position:C,available:false},{row:1,position:D,available:false},{row:2,position:A,available:true},{row:2,position:B,available:false},{row:2,position:C,available:false},{row:2,position:D,available:false},{row:3,position:A,available:true},{row:3,position:B,available:false},{row:3,position:C,available:false},{row:3,position:D,available:false}]


Now basically what I need to do is to parse this JSON string and when any of these photos have available:true in the JSON string, I add a class photo-available in the HTML. I am new to angular and I am not sure if there is an easy way to assign a class to the available photos. Would be glad if someone can tell me what to use or how to do it.



Edit: Angular Code is this:



<ul class=table-rows>

    <li class=photo-row ng:repeat=photo in photos ng:class='photo-' + photo.row + photo.position>

        <ul class=table-photos>

            <li class=photo photo-available ng:class=selectedOrNot(photo) ng:init=photo.selected = false ng:click=photo.selected = !photo.selected>



         <div class=photo-number>{{photo.row + photo.position}}</div>                          

        </li>                                   

     </ul>                                

  </li>

  <div class=clear></div>



More From » json
 Answers
7

Update3

The reason you are unable to restore previous selections is that you are overwriting the photo's selected property with ng-init:



ng:init=photo.selected = false

ng-class={'selected': photo.selected, 'available': photo.available}


When you combine these two, the 'selected' class will never be added because photo.selected has been hardcoded to false. You just need to remove ng-init, and the previous selection will trigger ng-class to add the correct class.



Here is a working demo: http://plnkr.co/tVdhRilaFfcn55h6mogu



Original answer

If the list of photos is not the same array as the list of available photos, you can use a directive to add the class. 



app.directive('availablePhoto', function($filter) {

  return {

    restrict: 'A',

    scope: true,

    link: function(scope, element, attr) {

      var id = attr.id



      var regex = /photo-(.)(.)/g;

      var match = regex.exec(id);



      var row = match[1]

      var position = match[2]



      var photo = $filter('filter')(scope.photos, {row:row, position:position}, false)



      console.log(photo);



      if (photo[0].available) {

        element.addClass('available');

      }

    }

  }

});


Then attach it to each list item like this:



<li class=photo id=photo-1A available-photo>1A</li>


Here is a demo: http://plnkr.co/WJCmLf2M39fcUnvOPyNA



Update1



Based on your update, I see that there is just one array populating the list, and it contains the available flag. Therefore, you don't need a custom directive - ngClass will work. Here it is integrated into your code sample:



<ul class=table-rows>

  <li class=photo-row ng:repeat=photo in photos ng:class='photo-' + photo.row + photo.position>

    <ul class=table-photos>

      <li class=photo ng-class={'available': photo.available} ng:init=photo.selected = false ng:click=photo.selected = !photo.selected>

        <div class=photo-number>{{photo.row + photo.position}}

        </div>                          

      </li>                                   

    </ul>

  </li>

  <div class=clear></div>  

</ul>


I have update the plunker to demonstrate this.

http://plnkr.co/WJCmLf2M39fcUnvOPyNA



Update2

Since you need ngClass to add multiple classes, use it like this: 



ng-class={'selected': photo.selected, 'available': photo.available}


Demonstration of selected + available: http://plnkr.co/WJCmLf2M39fcUnvOPyNA


[#71590] Friday, April 4, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
miles
Add To Favorites
Follow
Total Points: 256
Total Questions: 111
Total Answers: 104
Location: Benin
Member since Fri, Mar 24, 2023
1 Year ago
miles questions
Sun, Jan 30, 22, 00:00, 2 Years ago
Tue, Apr 27, 21, 00:00, 3 Years ago
Fri, Apr 9, 21, 00:00, 3 Years ago
Mon, Jun 29, 20, 00:00, 4 Years ago
Mon, Jun 22, 20, 00:00, 4 Years ago
View All
;