Develop Reference

Passing parameter onclick, in a loop using angular8

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>

Angular - check if class is odd or even on ng-click

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 */}
}

Invoking a function on text click: AngularJS

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);
}

How do you defer interpolation of an Angular directive parameter?

Let's say I have the following:
<my-directive value="{{row.id}}" /> <!-- row not defined -->
Then inside of your directive:
<div ng-repeat="row in rows">
<a ng-click="/path/{{value}}">..</a>
</a>
Where value is the same value as passed into the directive. How do I defer the evaluation of the attribute?g

To your question:
A) You could use $timeout in your directive's link function and set a second parameter when the timeout expires.
B) or, you could use $watch if you are waiting for it to be set and then conditionally update that second parameter.
However, I suspect the problem may come from an issue in you link and loop. Perhaps something like what is below would work better. Note the removal of the ng-click.
<div ng-repeat="row in rows">
..
</a>

In AngularJS how can I create a new ngController dynamically?

I'm trying to create new ngControllers on the fly, is this possible? I'm not writing it into the template with a ngRepeat or anything, since the user might never create an instance of a certain ngController.
Here's an example of my current template:
<div ng-controller="ViewUsers">
<div class="viewUsersList">
<table>
<tr class="userRow" ng-click="viewUser(user.user_id)" ng-repeat="user in users">
<td>{{user.first_name}} {{user.last_name}}
<br />{{user.phone}}
</td>
</tr>
</table>
</div>
</div>
So far it works great. When the user clicks a .userRow it calls viewUser(ID). The problem is here:
I want to create a new block of code like this:
<div ng-controller="UserDetail">
{{first_name}}
</div>
And append this to the DOM.
So if they click on Bobby and Sally, two UserDetail controller objects would be added to the DOM and work accordingly. (Ideally, I'd like to pass in the data-bound user model, but that's for later).
I tried a ghetto version in JSBin, but I'd rather not use JQuery if possible:
http://jsbin.com/EdOteTav/2/edit
Can anyone shine some light on this? Thanks in advance

I would change the code little bit and use directive instead of controller. See this simple and quick example in jsfiddle.
The directive would handle the click events and display whatever you want to display on the DOM. You can get the full user object from scope.user inside the directive.