I want to check the condition in Angular.
I want to look at two numbers that would enter Div if these two numbers were equal.
How can I check this condition?
I tried the following method and it was wrong.
<div *ngIf="'{{item1.menuID==item2.menuID}}'">
{{item1.title}}
</div>
The code you have there would evaluate to a string given you're adding single quotes around the condition, also you don't need to interpolate to access an object inside an ngIf.
If you want to evaluate if item1.menuID and item2.menuID are equal you would do
<div *ngIf="item1.menuID == item2.menuID">
{{item1.title}}
</div>
You don't require to use interpolation within [anyAttributeEnclosingSquareBrackets] or any angular attribute like *ngIf, *ngFor or some attributes like formControlName
For example:
<child-component [childAttribute]="parentComponentVariable">
<div *ngFor="let x of arrayVariable">Array Variable is present in component</div>
<input type="text" formControlName="name">
You can directly compare like below code:
<div *ngIf="item1.menuID==item2.menuID">
{{item1.title}}
</div>
Assuming that, item1 and item2 are not private variables of component and are available or initialise expectedly
Related
I'm generating a lot of HTML with ng-repeat. I rely on the $index variable in order to index data in my controller.
I do alot of stuff like
ng-submit="validateExistingGuest($index)"
In this case, an undetermined number of HTML forms is generated, hence the index.
Problem is, i sometimes need to use this variable inside a different kind of expression. That would look something like that:
ng-if= "user{{$index}}.valid"
Of course, that doesn't work. I tried ways of constructing that expression, with no success.
How would one go about doing this?
You need something like
ng-if="user[$index].valid
<div ng-repeat="value in user track by $index"> ...
//now you can use the {{$index}}
<div ng-if="user[$index].valid">Show only if valid!</div>
</div>
Why don't you use the object instead the $index?, try
<div ng-repeat="car in cars" >
<p {{car}}></p>
<button ng-click="buy(car)" > buy </button>
</div>
I'm adding checkboxes with angularjs ng-repeat like this:
<div class="checkbox-circle" ng-repeat="t in tenders">
<input type="checkbox" checklist-model="contratacion.select" checklist-value="t.id" id="t.id">
<label for="t.id">{{t.name}}</label>
</div>
Where "tenders" is an array with "name" and "id" properties. The problem is that the id value of the input is not changing through the loop, an the resultant checkboxes have the same id value. Am I passing incorrectly the id values to the input? Is it wrong to expect "t.id" to change in the input id?
use the same curly brace notation inside of the non-angular attributes that you would use for normal text, ie:
<div class="checkbox-circle" ng-repeat="t in tenders">
<input type="checkbox" checklist-model="contratacion.select" checklist-value="t.id" id="{{t.id}}">
<label for="{{t.id}}">{{t.name}}</label>
</div>
Yes, you would be wrong; that is because id is a standard attribute where t.id is simply a simply. For Angular to convert this value into the expected id, you need to use interpolation: id="{{t.id}}".
The method you were attempting to use is an Angular expression that is only valid for certain attributes, where the directive (checklist-value for example) allows for it; otherwise you need to use the {{<expression>}} way to evaluate your value.
I want to use ng-repeat more or less as follows:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
onClick="DoSomething(One_Entry.Entry_ID)">
<!---
present various fields within "One_Entry"
-->
</div>
Entries_List is a JSON array of objects, being Entry_ID one of the elements within the object.
DoSomething is a function within the related controller that is supposed to perform a specific activity on the structure whose ID is the passed Entry_ID.
I tried using $index as well as $parent.$index but I'm getting an error stating that these variable do not exist.
Could anyone tell me how I can achieve the above functionality?
Thanks.
The object One_Entry is scoped. Therefore onclick won't work. Use ng-click instead which is the Angular version for onclick:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
ng-click="DoSomething(One_Entry.Entry_ID)">
<!---
present various fields within "One_Entry"
-->
</div>
It's not OnClick it's ng-click
Change
From :
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
onClick="DoSomething(One_Entry.Entry_ID)">
To:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
ng-click="DoSomething(One_Entry.Entry_ID)">
I am building an Angular form that needs repeatable form elements inside an ngRepeat.
<form name="form">
<div ng-repeat="x in [1,2,3,4]">
<input name="something_{{$index}}" ng-model="hi" required>
<div ng-messages="form.something_{{$index}}.$error">
<ng-message="required">This is required</ng-message>
</div>
</div>
<pre>{{form | json: 4}}</pre>
</form>
Angular now supports dynamically declared input names so that you don't have to do something like:
<div ng-repeat="x in [1,2,3,4] ng-form="repeated-form"></div>
And you can use {{$index}} inside the ngRepeat to declare items dynamically. But this doesn't seem to work with ngMessages, which throws an error when I try to bind the index into it.
i.e. this:
<div ng-messages="form.something_{{$index}}.$error">
throws this:
Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 16 of the expression [form.something_{{$index}}.$error] starting at [{{$index}}.$error].
How can we dynamically declare which property on the form to watch, if ng-messages can't watch the form value that is declared with its {{$index}}?
PLNKR: http://plnkr.co/edit/4oOasbtffTgKqmxcppUG?p=preview (check console)
ng-messages="form['something_' + $index].$error"
Should work. I generally wouldn't put {{ }} in any of the ng directives because most of the ng directives execute with priority level 0 (including the {{ }} directive, ngBind). Also, the ng directives all use $evaluate on their argument, so they look at variable values in the scope by default.
Priority 0 for multiple directives on the same element means that Angular can't guarantee which directive will be applied first. Because of that, it is generally best to avoid using ngDirectives together as behavior can vary. ngIf is an exception as it executes with priority 600 (which is why directives aren't evaluated for an ng-if element not currently in the DOM no matter what).
<div ng-repeat="x in [0,1,2,3]">
<input name="something_{{$index}}" ng-model="hi" required>
<div ng-messages="form['something_' + $index].$error">
<ng-message="required">This is required</ng-message>
</div>
</div>
http://plnkr.co/edit/k5nzkpkJwSuf5dvlMMZi?p=preview
I would like to save an object in a ngRepeat so that I can use that object in its children, like shown in this code:
<div ng-repeat="bar in foo.bar>
<div ng-repeat="qux in baz.qux" myvalue="{'item1':foo.var1, 'item2':qux.var2}">
<div ng-click="myFirstFunction(myvalue)"></div>
<div ng-click="mySecondFunction(myvalue)"></div>
</div
</div
The object I want to generate and then use is rather large and I'd rather not define it repeatedly for each ngClick directive.
I considered saving it into a scope variable but the object will change for each iteration of the ngRepeat.
Is there a directive or an other way that I can use to store this value for later use?
To avoid the repetition of what is probably a long variable definition, you can use the ngInit directive, whose content will be executed each time a corresponding element is created.
<div ng-repeat="bar in foo.bar>
<div
ng-repeat="qux in baz.qux"
ng-init="myValue = {'item1':foo.var1, 'item2':qux.var2 }"
>
<div ng-click="myFirstFunction(myValue)"></div>
<div ng-click="mySecondFunction(myValue)"></div>
</div>
</div>
However, a complex code in a template is rarely a good idea. Contemplate moving your logic inside a controller, as advised by the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
You can just do the naive thing here and it'll work:
<div ng-repeat="bar in foo.bar>
<div ng-repeat="qux in baz.qux">
<div ng-click="myFirstFunction(foo, quz)"></div>
<div ng-click="mySecondFunction(foo, quz)"></div>
</div>
</div>
Angular will know the scope of the repeat when you click.
You could store it in local storage using ng-storage.
https://github.com/gsklee/ngStorage
This would allow you to store it, then use it anywhere in the application.
cookies, you also have ng-cookies
https://docs.angularjs.org/api/ngCookies
try this out! or cookieStorage