Confused by AngularJS ng-repeat syntax - angularjs

What is the meaning of the singular/plural syntax in, say, ng-repeat="product in store.products"?

Singular/plural is used just for common sense and code readability - it doesn't have to be singular/plural. You can do
ng-repeat="whatever in store.products"`
and then have the whatever object available inside (like: <img ng-src="{{whatever.images[0]}}" />).
In your case, store.products can't be changed since it refers to an actual object, while product is a completely custom name to be used in the repeat loop.
Fairly common in programming. Like the other answer said, it's similar to the for..in syntax.

This is essentially the same syntax as a Javascript for...in loop. It means for someTempVar in someArrayOrObject.

The directive ng-repeat="product in products" creates a new variable product that you can reference inside your template. There is no singular/plural interpolation going on.

Related

angular-translate: unable to use dynamic data in nested directives

I'm using angular-translate package. It provides developers with different things. One thing is internal interpolation so you are able to use dynamic data inside translation strings. Or even angular directives.
Assume we have greeting.
'Hello {{name}}!'
That is used in template like that:
<h3 translate="greeting" translate-values="vm.user" translate-compile></h3>
But user.name maybe empty. In this case I'd like to see "Hello anonymous!". I'm trying to use ng-if but it does not work in expected way:
'greeting': 'Hello <span ng-if="!name">anonymous</span>{{name}}!'
It will output "Hello anonymousJack!" like if name is empty and is not empty at the same time.
Why I don't want to inject ng-if into template instead of translation? Because depending on language there will be different position of name part. So I'd like to avoid unclear decomposition like
<span translate="greeting_1"></span>
<span ng-if="vm.user.name" bind="vm.user.name"></span>
<span ng-if="!vm.user.name" translate="greeting_anomymous"></span>
<span translate="greeting_2"></span>
This looks unclear and confusing. Especially in more complex cases.
I've found all data passed through translate-values is available in nested variable interpolateParams. So next will work:
'greeting': 'Hello <span ng-if="!interpolateParams.name">anonymous</span>{{name}}!'

when should I write code with `{{}}` and without `{{}}` in html of angular js project

May be This is a simple question but it is challenging for me.
In angularJS when i write {{}} in html code so i write code like this like
if i talk about dynamic id, we write like code this
<div ng-repeat = 'item in itmes track by $index'>
<div id = "div-{{$index}}">{{item.name}}</div>
</div>
If i use any model without {{}} i write this example
<input id = 'name' ng-model = "item.name"/>
whenever i am coding in angular js, i write code without {{}} then if it is not work then i try code with {{}} and vise versa. and randomly 1 will correct
Question is when i write code with {{}} and without {{}} in html code ?
After the OP explained what exactly was the problem.
So, the question here is very simple: when do we use {{}} and when we don't in the context of ng-model.
When you do a <input type=... ng-model="someModel>, what you're essentially telling Angular is: "Here is an input element; attach $scope's someModel variable to the value of this input element.
Now, you can use this in your JavaScript controller like so: $scope.someModel, but what about HTML? We have a templating language in Angular, and when you give it some variable (say someModel), it'll search its $scope for it, and then put in the value there. If it is unable to, it'll throw a nasty error.
In essence, {{}} GETS the value, without that, you generally set the variable to gold the value of something.
Very simply put, AngularJS thinks that the content within the brace is an expression, which must be resolved. Once it is, Angular puts the value of the resolved expression there. In the most basic of the terms, you just tell it: "Here is some expression; put the evaluated value instead."
In ES6, we call it template strings.
So, you'll use it for expressions which mutate after every iteration. Say, a loop or something. Places where you know what the answer is, or you have static content, you won't use it.
Say you have the following bit of code:
...
...
$scope.figureOne = 10;
in your controller.js and the following in its view file:
<div>My age is {{ figureOne }}</div>
Angular gets the value from the $scope, and puts it there; so, the rendered form will be: My age is 10. However, if you had the following
<div>My age is figureOne</div>
This time, Angular knows that there is nothing to evaluate or resolve, so, it'll just render it as it is: My age is figureOne.
I hope I made it clear! :)
Angular directives have different types of parameters. Some parameters (#) expect string values and some expect javascript expressions (=) (with variables bound to $scope).
There's no obvious way to know which parameter expects what type of value (aside from looking at documentation).
If a variable expects static string value and you have an angular expression
then you'll need to evaluate it by wrapping in {{}}
If there variable expects an expression and you have an expression
simply type that in.
It's the best to avoid using {{}} where possible, your dynamic ID will fail when Angular hasn't interpolated the expression yet, use ng-attr-id="div-{{$index}} for that. https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
Another example, if you have a slow connection and Angular isn't loaded yet users will see the {{}}, you can avoid this by using ng-bind="".
See this thread for more info: AngularJS : Why ng-bind is better than {{}} in angular?
It is very simple.
{{something}} - used for one way binding(Static).
<input type="text" value="{{something}}">
Now if you change its value in HTML ,you can not get it by $scope.something in js.
but If you use ng-model="something",you can get its value in JS.
This happens because ng-model is two way binding.
<input type="text" ng-model="something">
Mostly We use ng-model for forms and {{}} to display static information like User details or else.

Need some guidance on how to set up directives for a dynamic view

I am working on my first angular directive and still getting my head around the concepts and what's possible with directives. As I've been researching the best way to tackle this problem I haven't been able to identify an example that addresses what I'm trying to do, so thought I would ask for some help from the experts here.
I have an array of objects that are one of three types.
I would like to use the ng-repeat directive to iterate through this array and display the objects on the page.
Each object type has a different view associated with it as each object shares some properties, but also have unique properties.
I would like to set up a directive that displays the correct view based on the objective type.
So the logic would work something like the following:
<div ng-repeat="item in dataset">
<the-smart-directive>item</the-smart-directive>
</div>
One idea would be to have one directive where I determine the templateUrl based on the object type and then have a unique template for each of the objects.
Another idea would be to have a parent directive and then three other directives (one for each object type) and the parent directive would insert the correct object type directive (this is the idea that seems like the better approach, but I'm not sure how to actually implement this idea).
I'd love some help in understanding the best way to tackle this and how to implement. If you could provide some example code that would be wonderful and get me started on the right path.
Thanks for your help!
The way we are using it is with ng-switch inside the ng-repeat.
<div ng-repeat="item in dataset" ng-switch="item.type">
<directive-one ng-switch-when="1">
</directive-one>
<directive-two ng-switch-when="2">
</directive-two>
<directive-three ng-switch-when="3">
</directive-three>
</div>

AngularJS Expression

I have a quick question on AngularJS:
I have one property from JSON as
"icon-class": "home"
Now I need to do this in my html page:
<span class="{{sub.icon-class}}"></span>
the sub is some other object here.
But inspecting the DOM, the value of the above expression is always zero (0). I guess the dash(-) is acting like a subtraction here.
How to do it I could not make it resolve.
Please help.
In this case, you can use bracket notation to retrieve the value when the key has non-standard characters:
<span class="{{sub['icon-class']}}"></span>
Read more about accessing properties at MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
You could do this:
<span class="{{sub['icon-class']}}"></span>
But in general I'd avoid hyphens in variable names

AngularJS: What is the best way to pass a binded scope value through ng-click?

I have the follow code:
<li class='' ng-click="changeStatus('hello', '{{result.name}}')">
Where 'hello' is my first parameter for changeStatus and I want to pass of binded result.name's value as the second parameter. Does anyone know how to accomplish this?
I tried {{result.name}}, '{{results.name}}' but neither seems to work.
There is probably something simple that am I missing?
I took a look at:
Can you pass parameters to an AngularJS controller on creation?
but both the parameters in ng-init were string literals.
You don't have to pass it.
You could just access it in your controller using :
$scope.result.name
If results is an array and you want to pass an individual result to a controller click function you need not decorate it with curly braces. The li will look like this:
<li ng-repeat="result in results" ng-click="changeStatus('hello', result.name)">{{result.name}}</li>
Working Fiddle
Angular treats the content of ng-click as an expression. This means that you write the content as though it is plain javascript (in most cases). For your example, this means leaving out the curly braces (since you are already writing 'javascript').
<li class='' ng-click="changeStatus('hello', result.name)">

Resources