Feedback on http://docs.angularjs.org/#!/api/angular.Array.orderBy

[Dean Sofer]

Hi there,

I read http://docs.angularjs.org/#!/api/angular.Array.orderBy and wanted to ask …. 

I have built this table example that uses sorting: http://jsfiddle.net/ProLoser/MS3TT/14/ however I am trying to figure out an elegant way to change the class of each <th> to visually show that a: I'm sorting by that column and b: wether it's ascending or descending.

How do I do that?  

________________________________

 

Dean Sofer  |  Software UI Engineer

Jobvite, Inc.

270 East Lane  |  Suite 3  |  Burlingame, CA 94010

De...@jobvite.com  |  714.618.4641 (mobile)

650.376.7227 (office)  | 650.648.0509 (fax)

[Nate Kidwell]

I mucked with your fiddle to add a basic version of this to the second
column at

http://jsfiddle.net/w7EUe/3/

Basically it is

<a ng:click="sort='id';reverse=!reverse" ng:class="sortIs('id')">Req
ID</a>

and

scope.sortIs = function(sortType) {
if (scope.sort == sortType) {
if (scope.reverse) {
return "currentSortReverse";
} else {
return "currentSort"
}
} else {
return "";
}
}

as well as adding the class definitions to the css.

Hope this helps.

Nate

On Dec 15, 10:39 pm, Dean Sofer <d...@jobvite.com> wrote:
> Hi there,
>
> I readhttp://docs.angularjs.org/#!/api/angular.Array.orderByand wanted to ask ….
>
> I have built this table example that uses sorting:http://jsfiddle.net/ProLoser/MS3TT/14/however I am trying to figure out an elegant way to change the class of each <th> to visually show that a: I'm sorting by that column and b: wether it's ascending or descending.

>
> How do I do that?
>
> ________________________________
>
> Dean Sofer  |  Software UI Engineer
> Jobvite, Inc.
> 270 East Lane  |  Suite 3  |  Burlingame, CA 94010

> D...@jobvite.com<mailto:d...@jobvite.com>  |  714.618.4641 (mobile)
> 650.376.7227 (office)  | 650.648.0509 (fax)

[Dan Doyon]

Hi,

Here is a fiddle I fixed up a while back (you can find other fiddles and such here https://github.com/angular/angular.js/wiki). I did an update to hopefully address or give you some ideas about how to approach this in your code.

http://jsfiddle.net/dandoyon/js64b/

what I'm doing is making runtime classes that will change as the pred and rvrs scope variables change   ng:class="th+'_'+pred+'_'+rvrs"

because the 'th' column heading does not change it essentially creates 3 sets of classes that change as the bindings (pred and rvrs) change.

I think similar approach could be applied to yours.

hope this helps

dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Dan Doyon]

Just saw Nate's after posting mine, putting in a function is probably more elegant (+1)

--dan

[ProLoser]

Dan: originally I thought of your solution too (on the <tr>) which although is the most elegant, it means you now have 2 (or 3) classes for each individually column. That's just unacceptable, having to define a new CSS class for every new column is horrible compared to if I was doing this with jquery by selecting the closest <td> and adding a class.

[ProLoser]

Sorry Nate, I thought of your solution too, and although it's probably the best, I don't like it either. It seems unreasonable to have to have 2 binded events for every column. I will keep testing a better solution. I may just honestly make a function and mix in some jQuery to manipulate the class in the same function.

Something like:

<a ng:click="sort('columnName')">

scope.sort = function(columnName) {

  scope.reverse = !scope.reverse;

  scope.sort = columnName;

  if (scope.reverse) this.switchClass('asc','desc'); 

  else this.switchClass('asc','desc');

}

That being said, can we add (or is there a way) to refer to the dom element that triggered the event? Also, I can't help but wonder how much I'm hacking when in jQuery I would also be able to select sibling sorters and remove their class. Or for that matter go to the closest parent <td> element and add the class there instead.

[Vojta Jina]

Nate's solution is good.

What do you don't like about it ProLoser ? What do you mean with 2 bound events ?

You can make some benchmarks, but using swithClass won't perform better. It's only more code :-D

V.

[Dan Doyon]

I've done some cleanup of this fiddle, using Nate's method and i did a bit of css embellishment. 

http://jsfiddle.net/dandoyon/js64b/

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/_baYC9hk_-AJ.

[ProLoser]

I'm trying to work with your cleaned up version and attempted to create a directive that makes bundles both the visual and programmatic behaviors together:

http://jsfiddle.net/js64b/11/

However no matter what I try I cannot get it to work. I am really frustrated that I can't seem to use widgets or directives to make life bundle up functionality. I have to explicitly do everything.

[Dan Doyon]

I'll give this a look to see what you're trying to accomplish.  I can understand working for really clean modularized code. Widgets and directives can be (for me at least) a bit head spinning. If I were you, go for the simple and then refactor once you have proficiencies in the directive/widget arena. Have you looked at the angular-contrib project? It may give you some ideas (hopefully help more than harm) and there are some utils that the developer created there. 

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/MP-p0T7eAf8J.

[Nate Kidwell]

+1 - Widgets and directives are out of my weight class.

I believe declarative widgets (i.e. coded in angular html rather than
js) are coming in a later angular version (Misko hinted at this, and
it needs to be done for angular to scale to huge projects) but for now
the binding example is terse enough to work well.

I predict once that comes custom attributes will be deprecated.
Personally I'm lucky that I don't need/need declarative widgets for a
few months at least.

On Dec 16, 9:56 pm, Dan Doyon <dando...@yahoo.com> wrote:
> I'll give this a look to see what you're trying to accomplish.  I can understand working for really clean modularized code. Widgets and directives can be (for me at least) a bit head spinning. If I were you, go for the simple and then refactor once you have proficiencies in the directive/widget arena. Have you looked at the angular-contrib project? It may give you some ideas (hopefully help more than harm) and there are some utils that the developer created there.
>
> --dan
>
> On Dec 16, 2011, at 5:23 PM, ProLoser wrote:
>
>
>
>
>
>
>
> > I'm trying to work with your cleaned up version and attempted to create a directive that makes bundles both the visual and programmatic behaviors together:
>
> >http://jsfiddle.net/js64b/11/
>
> > However no matter what I try I cannot get it to work. I am really frustrated that I can't seem to use widgets or directives to make life bundle up functionality. I have to explicitly do everything.
>
> > --
> > You received this message because you are subscribed to the Google Groups "AngularJS" group.

> > To view this discussion on the web visithttps://groups.google.com/d/msg/angular/-/MP-p0T7eAf8J.

[ProLoser]

No I have not heard of this project. Where can I find it?

Also, I am putting together a large blog post of every problem I manage to tackle in attempt to help others looking to adopt AngularJS.

Here is an update of a nifty trick I've been using to make my code less explicit and more implicit, but I am not sure why it's not removing the class (works in other scenarios mentioned in the blog post):

http://jsfiddle.net/ProLoser/js64b/12/

[Vojta Jina]

Hey ProLoser, not sure where is the trick, but here is your fiddle working and cleaned a bit:

http://jsfiddle.net/vojtajina/js64b/14/

V.

[Dan Doyon]

This is an older post and I realize widgets and directives are moving target... in any case, I've revised the SortableTable fiddle and made it more generic. 

I'd like to get people's opinions and any simplifications.  If people like it, i'll set it as base for the github reference. 

http://jsfiddle.net/dandoyon/js64b/20/

--dan

[Vojta Jina]

Hey Dan,

what is the advantage over my previously posted jsfiddle at http://jsfiddle.net/vojtajina/js64b/14/ ?

Simple implementation with two controller methods, instead of the widget/directive with duplicating lot of angular functionality (i.e. ng:click) + unnecessary watchers...

Btw, you can insert all JS into JS frame and it won't complain about angular not existing, but you have to change jsfiddle settings to include the JS in body, instead of head - in left menu, section "Framework", select "no wrap (body)" instead of "no wrap (head)" and you should be fine...

V.

[Dan Doyon]

Vojta,

Only advantage of mine over yours is that I learned I have to pay closer attention to the newsgroup.  I thought this was too much effort. On the up side, i got better understanding of widgets/directives.

thanks 

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/LtSk-8G8i7AJ.

[ProLoser]

So I think the link I gave was wrong.

Vojta: the version you provide is pretty much the base version I was building off of and does not address what I was trying to do at all.

Dan: I'm actually impressed, that was pretty much exactly what I was trying to do. However your implementation is a little verbose.

It could actually be trimmed down to be a lot more efficient and easier, however I'm trying to debug one issue:

http://jsfiddle.net/ProLoser/js64b/27/

This is my version, the sorting still functions, but the class isn't changing and the {{hdg}} isn't being parsed for some reason.

Vojta: I would like to get a cleaned up implementation working as proof of concept for more complex functionality (when 2 small functions aren't all that's involved). I have other features I have been thinking of placing into widgets and by using this I can share the developed functionality with others and reuse it across more applications.

[Dan Doyon]

Dean,

 

The heading is not rendering and I believe that it has to do with the fact that ng: repeat is an attribute widget and you’ve declared ui:sort as an attribute widget.

 

Per the doc, “Only one attribute widget is allowed per element.”, this is why I went with a regular widget.

 

http://docs-next.angularjs.org/guide/dev_guide.compiler.widgets

 

So I changed your ui:sort to a directive. I also made things ‘less verbose’. I made it verbose intentionally, however, this refactored version reads pretty well.

 

http://jsfiddle.net/dandoyon/SfaKu/

 

I agree with Vojta on using angular built-ins such as ‘ng:click’. But I also agree that having the techniques in place for creating directives/widgets is a good thing.

 

--dan

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/fDjOAxJJOowJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

---

No virus found in this message.
Checked by AVG - www.avg.com
Version: 2012.0.1901 / Virus Database: 2109/4713 - Release Date: 12/30/11

[johntom]

HI,

I like the simplicity of  http://jsfiddle.net/vojtajina/js64b/14/  but would like to know if you can control the order of the display columns given more realistic columns names see http://jsfiddle.net/ncDm9/ with the following column names (name,surname,city). This will display columns in alphabetic order and I'd like to know if I can keep the columns in the  (name,surname,city) order.

Thanks,

John

 scope.head = {
        "Name": "Name",
        "Surname": "Surname",
       "City": "City"
    }; 

[Pawel Kozlowski]

Hi John!

On Sat, Aug 25, 2012 at 4:26 PM, johntom <jrt...@gmail.com> wrote:

> like to know if you can control the order of the display columns given more
> realistic columns names see http://jsfiddle.net/ncDm9/ with the following
> column names (name,surname,city). This will display columns in alphabetic
> order and I'd like to know if I can keep the columns in the
> (name,surname,city) order.

If I understand you correctly this fiddle would do the trick for you:
http://jsfiddle.net/pkozlowski_opensource/CZRL5/12/
I've updated the fiddles to use 1.0.1.

Hope this helps,
Pawel

[johntom]

Thanks Pawel, that's exactly what I was looking for!

John