I have an array of objects. i am iterating that in loop and passing each item's name to onclick which targets a function openIt(val) in app.js file which is in assets folder. ie
Angular Code:
<div *ngFor="let item of listArray">
<button class="tabopen" onclick="openIt(item.name)">{{item.name}}</button>
</div>
app.js Code:
function openIt(data) {
console.log(data);
}
In my openIt function in app.js file i am not getting item.name. In my console it displays error that item is not defined. But when i pass static data i.e onclick="openIt('sample_data')"it does not show any error.
Even though item.name also exists i am getting correct values against this as well. I am not getting that why i am not able to pass iterative data to the parameters.
If you're using Angular then you should go with (click) because when you declare an event handler you need to surround the DOM event name in parentheses and assign a template statement to it.
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
event binding: varsion 1 on-click="function", version 2 (click)="function"
<div *ngFor="let item of listArray">
<button class="tabopen" on-click="openIt(item.name)">{{item.name}}</button>
</div>
<div *ngFor="let item of listArray">
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
</div>
Related
If I want any changes in my UI then I direct pass the data like;
In HTML Template
<li *ngFor="let post of posts;let i = index;">
{{i+1}}) {{post.name}}
<button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</button>
</li>
In Component TS
editCategory(post){
post.name="Something";
}
this will reflect in the UI too and works fine!
but when I try to do it indirectly that doesn't happen like:
In HTML Template
<li *ngFor="let post of posts;let i = index;">
{{i+1}}) {{post.name}}
<button (click)="deleteCategory(post); modal1.show();" class="btn btn-danger btn-sm">Edit</button>
</li>
<div #modal1="bs-modal">
<button (click)="finallyDeleteCategory(); modal1.show();" class="btn btn-danger btn-sm">Edit</button> //making changes through this button
</div>
In Component TS
deleteCategory(post){
this.savedPost=post;
}
finallyDeleteCategory(){
this.savedPost.name="deleted"; //this Doesn't work
}
While am saving data in the class variable then making changes in the variable then it is not reflecting in the UI.
Doubts:
How can i save the refernce of the Post in the class variable?
Is this the correct way to make changes indirectly or i have pass on data in the html itself?
Any help would be great thanks!
Since finallyDeleteCategory is outside the loop context you cant just pass a reference of post and change its name since it does not exist.
this.savedPost.name="deleted"; does not work because the element being looped are part of the posts array.What you can do is save the post index i instead of the post object and in the method
(click)="editCategory(i)"
deleteCategory(loopindex){
this.index=loopindex
}
finallyDeleteCategory you retrieve the posts from the array then change it directly there.
finallyDeleteCategory(){
posts[this.index].name="deleted";
}
It seems you only save the deleted post when you call the 'deleteCategory' method on the list item. So with your setup, the changes will only reflect when you first press the edit button on one of the list items.
I have elements inside ngFor loop. Each elements get reference like this #f{{floor}}b. As you see floor is a variable.
I want to pass these elements to a function.
Code:
<button #f{{floor}}b (click)="onClick(f{{floor}}b)"></button>
I tried this but it only pass a string like this f5b not the element itself:
<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
Full code:
<div *ngFor="let floor of floors">
<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
</div>
floor is a number and floors is an array of numbers.
It is okay to have same template variable name inside *ngFor, no need to make unique template variable name inside *ngFor.
Html
<div *ngFor="let floor of floors">
<button #fb (click)="onClick(fb)"></button>
</div>
Even by having similar template name, you can query the DOM using #ViewChildren decorator.
#ViewChildren('fb') fbButtons:QueryList<any>;
Just use the same variable
<div *ngFor="let floor of floors">
<button #btn (click)="onClick(btn)"></button>
</div>
or use $event.target/currentTarget
I have the following ng-repeat that gives an element a className based on whether it is even or odd...
<div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
On ng-click I am calling displayHTML() and passing a parameter content so that only that particular div that is clicked calls the function.
However on ng-click I'm attempting to see whether the clicked element is ng-class-odd or ng-class-even and I want the function to only be called if the element is ng-class-odd.
But I do not know an easy way to do this. Is there an easy "angular" way of doing it. If not, what should I put here...
$scope.displayHTML = function(obj){
////
}
ngRepeat exposes several local variables to the scope, specifically $even and $odd. Just use those:
<div ng-click="displayHTML(content, $even)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
js:
$scope.displayHTML = function(obj, $even) {
if($even) {/* even code*/}
else {/* odd code */}
}
I am trying to invoke a specific controller method when click on some text. This function makes some remote calls to another server and configure showing or hiding another div. I also need to pass some parameters to such functions, one of which is static text and the other is a angularJS variable (i.e. an element of a list I am iterating on.
I am not sure the best way to do it, as the following code does not seem to work:
<div ng-repeat="item in item_list">
<div ><p ng-click="functionToInvoke({{item.name}},
'static text')">{{item.name}}</p></div>
I get a compile error on the paragraph.
How do I manage this situation?
When specifing a function in ng-click you dont need {{}}
<div ng-repeat="item in item_list">
<div >
<p ng-click="functionToInvoke(item.name, 'static text')">{{item.name}}</p>
</div>
</div>
Your function then looks something like this:
$scope.functionToInvoke = function(var, static){
console.log('This is the variable:' + var);
console.log('This is the static:' + static);
}
In my code i like to pass to arguments to the function specified inside the ng-click attribute.
<div class="shout" ng-repeat="user in users">
<p>{{user.name}}</p>
<img src="media/images/delete.png" ng-click="deleteUser({{$index}},{{user._id}})"/>
</div>
and in the controller
function deleteUser(index, userId){...}
the parameter index is to remove the user from $scope.user and user._id to remove it from the mongodb. i am a newbee to angular js.
when i tried like this the deleteUser is not getting called. if i pass single argument it works like charm but when i pass more than its not working
You don't need {{ }} while specifying arguments to an event handlers (ng-click). The correct syntax would be ng-click="deleteUser($index, user._id):
<div class="shout" ng-repeat="user in users">
<p>{{user.name}}</p>
<img src="media/images/delete.png" ng-click="deleteUser($index, user._id)"/>
</div>
Here is a working plunker based on the code you've provided (check the console to see that click handler is working correctly): http://plnkr.co/edit/26A4Rj0FScPXYU7z92E6?p=preview