angular dynamic hide/show

[Matt Eller]

http://jsfiddle.net/hFrFa/

I'm trying to create a form with some fields that will hide when the checkbox is clicked.  But I want to get data from my scope that tells the fields which checkbox to respond to.  In this code, what do I need to replace the "????" with to achieve this?  Or if you know a better way, I'm all ears.  Thanks!

[Ian Ross]

Probably not the most efficient thing to do, but I'd probably just write a little function like this (you can make it better -- this is just the first thing I came up with):

 $scope.hider = function(lab) {

        return $scope.fields.filter(function(f) { return f.label == lab; })[0].value;  

    };

and replace ???? with "hider(field.show)".  Fiddle here: http://jsfiddle.net/f5wVG/

On 11 July 2013 18:46, Matt Eller <helloma...@gmail.com> wrote:

http://jsfiddle.net/hFrFa/

I'm trying to create a form with some fields that will hide when the checkbox is clicked.  But I want to get data from my scope that tells the fields which checkbox to respond to.  In this code, what do I need to replace the "????" with to achieve this?  Or if you know a better way, I'm all ears.  Thanks!

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Ian Ross   Tel: +43(0)6804451378   i...@skybluetrades.net   www.skybluetrades.net

[Matt Eller]

Thanks for such a quick response.  That's perfect, thanks!

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/flT8SXtUQuU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

----------------------------------------------

Matt Eller - Web Developer

email: helloma...@gmail.com

----------------------------------------------

[Matt Eller]

Can you explain what this line is doing?

return $scope.fields.filter(function(f) { return f.label == lab; })[0].value;  

[Ian Ross]

Hi Matt,

Sure.  No problem!

return $scope.fields.filter(function(f) { return f.label == lab; })[0].value;  

It takes your $scope.fields variable, and filters it (Array.filter is a standard ECMAscript 5 function): for each value in your $scope.fields array, the anonymous function argument to "filter" gets called with that value from the array as its argument ("f").  If the anonymous function returns true, the value is kept in the result of the call to "filter", otherwise it's discarded.  So the result of the call to "filter" is an array of entries in $scope.fields whose "label" field is equal to the argument passed to the "hider" function (which I called "lab").  The "[0].value" bit just takes the first one of these and returns the value field, which is the thing you want to use for switching the visibility of your other fields on or off.  (Things will obviously break if you have no entries in $scope.fields that match the condition used in the call to "filter", but you'll get a pretty obvious error message in the JS console if you do that.)

This style of programming takes a bit of getting used to, but it makes it easy to compose this sort of selection, filtering and field selection in a quick way.  (You could do just the same thing by writing a for loop to iterate over then entries in $scope.fields looking for one with the appropriate label and then returning its value.)

Hope that helps!

Cheers,

Ian.

 

[Matt Eller]

Thanks!  I have never used Array.filter so that threw me off.  

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/flT8SXtUQuU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.