0

I'm looking through a webpage source code and it has the following div tag:

<div class="color-swatch" ng-if="quickOrderItem.colorNumber && !quickOrderItem.isCustomColor && filteredColors.length > 0" ng-repeat="color in filteredColors = (quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' | limitTo:1 )">

I understand most of it, but the part that is confusing me is the very last part:

ng-repeat="color in filteredColors = (quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' | limitTo:1 )"

For the sake of simplicity, I'll add some line breaks to it to make it easier to read:

ng-repeat="color in filteredColors = (
quickOrderItem.selectedSku.colorsArr |     
filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' |    
limitTo:1 )"

What exactly is this doing? I understand that it's iterating through the filteredColors array, with each currently selected color assigned to the variable color. (Basically a for each loop)

But I have no idea what the rest of that means. Why is `color in filteredColors' equal to something else? I don't understand that. Furthermore, what exactly are those three separated things in the parenthesis doing?

Can someone help me to understand what this all means?

Improve this question
5
  • It's been a while since I wrote any angular, but what would make sense is that filteredColors is actually resulting of the expression in parenthesis. A bit like it would in JS: for (var key in (obj = { test: 'test' })) { console.log(key );};. The | character in angular is piping input values into filters. Commented Sep 1, 2015 at 15:47
  • 1
    Part of what questions should contain is something other users could search for. If you attempted to search for 'what exactly is this angular code doing?' on Google, you'd never find a good answer. Instead, take this time and improve the question so that you're asking about the concept you really want to know about; that means doing a bit of research to find out what you're actually asking about it, and then using terms that others would search for (the angular specific terms). In this case, it appears you're asking about a specific angular filter. Commented Sep 1, 2015 at 15:56
  • You should update the question title to conform to the rules of SO. Something like "what does the assignment expression do inside an ng-repeat directive" could fix this Commented Sep 1, 2015 at 17:06
  • @cleftheris updated. Commented Sep 1, 2015 at 23:51
  • @GeorgeStocker Could the new title of the question qualify for removing the questions restriction? Commented Sep 2, 2015 at 9:18

3 Answers 3

Reset to default
1

This statement is actually using two different angular features in a single liner. These are an initializer filteredColors = ... that initializes a new variable to store the collection that gets generated by the rest = (expression). This is done for catching the result if you need to use it further down your template. The parenthesis surrounding the expression are there just for scoping javascript execution.

The second is angular filters, filter pipelining, and custom params on angular filters. You see quickOrderItem.selectedSku.colorsArr is a javascript array as it seems that gets filtered by a custom filter named filterArrayOfObjects passing 3 parameters (separated by the :)

  1. the field quickOrderItem.colorNumber
  2. the string literal 'name'
  3. the string literal 'colorNum'

Filters are separated with the pipe '|' and can be chaned to each other so that ones' result is the input for the next. So last the code uses the limitTo filter with a parameter of number 1 in order to restrict the results to just the first one.

A somewhat more readable equivalent could be the following but still there is not much improvement:

<div class="color-swatch" 
     ng-if="quickOrderItem.colorNumber && 
           !quickOrderItem.isCustomColor && 
            filteredColors.length > 0" 
     ng-init="filteredColors = quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum'| limitTo:1" 
     ng-repeat="color in filteredColors">
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

So it appears that filterArrayOfObjects is looking for any substring match between colorNumber and 'name' as well as colorNumber and 'colorNum'. Is there a way to make it search for an exact string match rather than a substring match?
@jros maybe you could do it using the angulars' default filiter named filter instead of the custom one filterArrayOfObjects. Or even roll your own. It is quite straightforward. You need just implement a js function
ah, well there is my confusion. I was under the misapprehension that filterArrayOfObjects was an angular default function, now that I see that it's custom everything should be easy!
0
  1. take array quickOrderItem.selectedSku.colorsArr
  2. filter it using filterArrayOfObjects with parameters quickOrderItem.colorNumber, 'name', 'colorNum'
  3. take first element
  4. assign result to filteredColors
  5. make repeat on filteredColors
Improve this answer

Comments

0

The parentheses contains an expression that returns a collection. The collection is an array (quickOrderItem.selectedSku.colorsArr) on the scope that is then run through a custom filter that takes three arguments. The filter is named filterArrayOfObjects and the arguments are quickOrderItem.colorNumber, 'name', and 'colorNum', the latter two are likely attributes on the object that is being filtered.

The limitTo does exactly what it says, it limits the returned collection to 1 item.

filteredColors is assigned the value of the expression, which is then iterated over.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.