I have a table within this data from an API, I allow the tablerows to be clicked so the data can be changed with background code:
<tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)="!allowClick || changeTable(dataObject.id)">
<td *ngFor="let key of createTableArray(dataObject)" class="{{ getTableColumnClass(key.key) }}">
<div [innerHTML]="key.value"></div>
</td>
</tr>
When the rows should NOT be click-able I added the 'allowClick', yet when they click the row, the function 'changeTable()' is not called, but the page is refreshing because the '*ngFor' loop is triggered again...
Which is really annoying because when you click and drag to copy, it refreshes the page and your selection will be gone...
Can anyone explain why and how to disable this?
If you need any other information, simply ask me :)
Instead of this
(click)="!allowClick || changeTable(dataObject.id)"
Try this
(click)="allowClick ? changeTable(dataObject.id) : ' ' "
Or
Call that function changeTable and check your condition allowclick inside that function block to execute rest of the code.
Related
I use ngb-accordion in my app. I am trying to get data from every panel but when the first panel is opened click from the second panel returns me wrong data.
Result
I think the problem is the event which raises when input file changes.
Stackblitz Link
I will be glad if someone give me a hint for solving this problem.
There are few things to note in your code.
Your *ngFor is at ngb-accordion which is creating a new accordion for every loop, instead of creating multiple panel within one accordion.
Fix: <ngb-panel *ngFor="let data of datalist; let i = index">
You are using the same label for all three panels, because of which your first panel is opening every time, regardless of which panel you are clicking.
Fix: <label [for]="'image-input-' + i"> and <input ... [id]="'image-input-' + i"
The modal that opens after image selection has no knowledge of which panel it's getting triggered from. So, you have to use your (change)="onFileChange($event, data)" event/function to keep track of selected panel/corresponding data.
Then you can pass that selection from your modal to your processFile(...)
Fix:
export class AppComponent {
...
selectedData: Data;
...
...
onFileChange(event: any, data): void {
...
this.selectedData = data;
}
}
html:
...
<input ... (change)="onFileChange($event, data)>
...
...
<button
...
(click)="processFile(imageInput, selectedData)"
> Done
</button>
Stackblitz Demo
very simple
what is the equivalent of this jQuery code
$('#message tr').eq(index).addClass('negative') in angular,
or how can i achieve the same result with angular
can't use [class.bind] the above job should be done in by clicking the button.
the button will pass some data to the function and based on some condition and checking the negative class will be added to the related row not to all of them.
You have not added any code, so I imagine you have something like:
<table>
<tr *ngFor="let data of arrayData;let i=index" [class.negative]="indexSelected==i">
<td>{{data?.prop1}}</td>
<td>{{data?.prop2}}</td>
<td><button
(click)="indexSelected=(indexSelected==i)?-1:i;
indexSelected!=-1 && diifer(data)">
select
</button>
</td>
</tr>
</table>
(or instead use a button add the "click" to the <tr>)
You can also pass the "index" to the function diifer like
(click)="diifer(data,i)"
And
diifer(data:any,index)
{
this.indexSelected=this.indexSelected==index?-1:index
if (this.indexSelected!=-1)
{
...do something..
}
}
NOTE: See that you check if indexSelected is the "row" you select. If true, you "unselect" making indexSelected=-1
NOTE2: remember that index goes from 0 to arrayData.length-1
I have created a table using el-table (Element-ui) in Vue.js. I want to access a specific row in the table when clicked on a button in that row, but the catch here is that after clicking on the button, a dialog box should open up and then access that specific row. When I try to access the row outside of the dialog box using scope.row, it works perfectly fine but it does not work properly when accessed inside teh dialog box, instead it runs in a loop till the end of the table.
Please find the code below:
<el-table-column prop="count"
label="Total">
<template slot-scope="scope">
<!-- {{fetchData(scope.row)}} When scope.row is accessed here, it works perfectly-->
<el-button type="text" #click="dialogVisible = true">{{scope.row.count}}</el-button>
<el-dialog
:visible.sync="dialogVisible"
:before-close="handleClose">
<!--I want to access the speicfic row clicked here, but it ends up looping through the table and doesnt send that specific row only. -->
{{fetchData(scope.row)}}
</el-dialog>
</template>
</el-table-column>
Can someone please suggest some solution to this issue in the above code? I am stuck on this for while. Would appreciate it.
Thank you.
This is a table... So fetchData will be called for each row as your code sits now.
But if you attach fetchData on the button instead, it will work. But then you would have to add a variable to the mix, or use a computed property. Anyways, I don't like calling functions in template, handle that logic in script or using computed properties. So here's what I'd do:
data() {
return {
chosenRow: null
}
},
methods: {
fetchData(row) {
this.chosenRow = row;
}
}
Template:
<template slot-scope="scope">
<el-button type="text" #click="fetchData(scope.row); dialogVisible = true">
{{ scope.row.follower_count }}
</el-button>
<el-dialog :visible.sync="dialogVisible">
{{ chosenRow }}
</el-dialog>
</template>
or just assign the row in template...
#click="chosenRow = scope.row; dialogVisible = true"
Based on my searches when you want to hide the visibility of element in html using angularjs just used ng-show or ng-hide. In my page I have a table generated using ng-repeat.Each row have a button "show check". When the button is clicked the word "CHECK" should display beside the ID. Ng-show is working fine except when I clicked the button in the row with ID 1 all the rows display CHECK the, CHECK word should be display only in a row where I have click the button. What is missing? I try to passed the key parameter but it's not work. Any advice and suggestions would be appreciated. Thanks
My fiddle is : https://jsfiddle.net/DharkRoses/wydyagao/
I used this code so far:
$scope.myVar = true;
$scope.toggleShow = function(key){
alert(key);
$scope.myVar =!$scope.myVar;
};
You should add myVar for each user in the ng-repeat list.
<tr ng-repeat="user in users">
<td><p ng-show ="user.myVar">CHECK</p>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.stat}}</td>
<td><button id ="btn" ng-click = "toggleShow(user)">show check</button> </td>
</tr>
Then in your controller
$scope.toggleShow = function(user){
alert(user.myVar);
user.myVar =!user.myVar;
};
I wish to create a drop down select list with option items that can trigger http Get and refresh the page.
I wish to run some code in the controller action when an option in the drop down is clicked.
I used the Html.DropdownlistFor() helper but I could not manipulate it thus.
Here is the code so you can understand me better,
var olist = db.ItemPackagingUnits.Where(i => i.ItemName.Equals(item.ItemName.ToUpper().Trim()));
<td>
<select>
#foreach(var oitem in olist)
{
<option value ='#oitem.UnitOfMeasurementName'>#oitem.UnitOfMeasurementName</option>
}
</select>
</td>
I hope I have given enough information on what I wish to achieve. DoSales is an action in the Restaurant Controller which has both Get and Post parts but I only wish to call the get part and refresh the page at the same time (or else I would have used Ajax or JSon) when the user clicks on any of the options in the drop down that was generated. Thank you.
Yes it worked! Thanks Mario J Vargas! Here are the code and javascript!
var olist = db.ItemPackagingUnits.Where(i => i.ItemName.Equals(item.ItemName.ToUpper().Trim()));
<td>
<select onchange ="myFunc(this)">
#foreach(var oitem in olist)
{
<option value ='/Restaurant/DoSales?ItemName=#item.ItemName&PackagingUnit=#oitem.UnitOfMeasurementName&recalulatePrice=true'>#oitem.UnitOfMeasurementName</option>
}
</select>
</td>
<script type="text/javascript">
function myFunc(myDropdown) {
//var myDropdown = document.getElementById(ddname);
window.location = myDropdown.options[myDropdown.selectedIndex].value;
}
Anon, your suggestion I believe has some merit and sounds feasible but I quickly implemented Mario's. Thanks for responding though. Indeed, there ain't no place like StackOverflow! Thanks again, Mario and Anon.