Have to select dropdown and Selected dropdown value should be updated in immediate column(td) value in the table. I tried with the below code, I can able to populate dropdowns and I can select options from the dropdown. But selected dropdown need to update in the immediate "td" column. Please find attached a screenshot and stackblitz for the demo.
HTML code:
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
ts code:
this.http.get(dataUrl).subscribe(response => {
this.persons = response.data.map(x=>({...x,check:false,test:'test'}));
this.dtTrigger.next();
});
Stackblitz for Demo
The column seems to point to firstName instead of the test that you have binded on the dropdown.. So you might want to change it to <td>{{ person.test}}</td>.
Example:
<tbody>
<tr *ngFor="let person of persons;let i = index;">
<td><input [(ngModel)]="person.check" type="checkbox" class="checkboxCls" name="id" ></td>
<td>{{ person.id }}</td>
<td>
<span id={{i+1}})>{{ person.firstName }}</span><br/>
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
</select>
</td>
<td>{{ person.test }}</td> <---HERE
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
Also, if you want to have it initialised with the first name; you can change your map function to add the first name instead of 'test'
this.persons = response.data.map(x=>({...x,check:false,test:x.firstName}));
Related
I have an application which shows data in tabular form which has columns
id, name, price, quantity
A am showing the data using ng-repeat Please see this
Plunker
<body ng-controller="myController">
<h1>Data</h1>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>PRICE</th>
<th>QUANTITY</th>
</tr>
<tr ng-repeat="item in myData">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
</table>
What I want to do is to add multiple filters in ng-repeat on this table
a) Filter by 'Name'
b) Filter by 'Price' OR 'Quantity'
It means that at any given point of time the result of the table should be filtered by combination of
i) EITHER 'Name' and 'Price'
ii) OR 'Name' and 'Quantity'
The Quantity filter should be inactive when Price filter is active and vice versa.
I will have 3 input fields for the filter parameters.
How can I apply filters to the ng-repeat in html to achieve this?
I suggest you create a custom filter and pass a custom filterObject, containing all filteroptions to this filter.
<tr ng-repeat="item in myData | myCustomFilter:filterObject">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
your filterobject would look like :
$scope.filterObject = {
id: false,
name: true,
price: false,
quantity: true
}
In myCustomFilter :
app.filter('myCustomFilter', function(items, filterObject) {
// filter your items depending on which filters are enabled
});
this is test myDatafilter
add in js
myDatafilter = function () {};
<h1>Data</h1>
<input type="text" ng-model="myDatafilter"/>
<tr ng-repeat="item in myData | filter:myDatafilter">
I just want to value my check_list[], so it will contain array $file.
If user clicks checkbox, it will contain all the data in 1 file..
I tried to concatenate but then grouping them was a problem.
I tried hidden values, but got only 1 file values.
#foreach($files as $file)
<tr>
<td><input type="checkbox" name="check_list[]" ></td>
<td>{{ $file['file_name'] }}</td>
<td>{{ $file['file_type'] }}</td>
<td>{{ $file['file_modified'] }}</td>
<td>{{ $file['file_size'] }}</td>
<td>{{ $file['location'] }}</td>
</tr>
#endforeach
Pls. help Im stuck on this problem..
You can use the following approach:
var selectedvalues = new Array();
$("input[name='check_list[]']:checked").each(function() {
selectedvalues.push($(this).val());
});
You can see other alternative ways here: Select values of checkbox group with jQuery
I have some code that lists out items in a table from a database. The click function toggles the cells between green and red
<div class="row">
<div class="logs-table col-xs-12">
<table class="table table-bordered table-hover" style="width:100%">
<tr>
<th>Name</th>
<th>Seed</th>
<th>Division</th>
</tr>
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !started}" ng-click="inc()">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
</table>
</div>
</div>
My click function is below
$scope.inc = function () { $scope.started = !$scope.started }
The only problem is that this is changing all of the cells in the first column. I'm thinking i need to pass a parameter in my click function, but I'm not sure what.
If you don't use the started value in your controller, you don't really need to define a function.
You could use ng-init to initialize an array keeping track of the started value for each team.
Something like this:
<tr ng-repeat="team in Pool" ng-init="started = []">
<td ng-class="{'btn-danger': started[$index], 'btn-success': !started[$index]}" ng-click="started[$index] = !started[$index]">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
Somehow cleaner would be if there was a started property on every team instance:
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': team.started, 'btn-success': !team.started}" ng-click="team.started = !team.started">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
Yes, passing a parameter into your function will help. Currently you have a $scope level variable ($scope.started) which selects your css ng-class. You probably want a team-by-team property. To do this, you should refer to the actual team object from within your ng-repeat.
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !team.started}" ng-click="inc(team)">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
And in your javascript:
$scope.inc = function (team) { team.started = !team.started; }
Now that your are using the actual individual object (team) from your ng-repeat, everything should work fine.
How I pass an object as a parameter in a ng-click within a ng-repeat?
Example:
<tr data-ng-repeat="table in tables">
<td>{{ table.name }}</td>
<td>{{ isActive(table.active) }}</td>
<td>{{ table.initialDate }}</td>
<td>{{ table.finalDate }}</td>
<td>
<button data-ng-click="updateTable(table)">Update</button>
</td>
</tr>
Inside the ng-click updateTable(HERE), I want to pass my object table.
Can someone help me?
In your component.html edit your code as shown below :
<td><button (click)=updateTable(table)>Update</button></td></tr>
then in your typescript code just declare the function
updateTable(table){
console.log(table); //write your own code here!.
}
I have a table where the last column in each row contains a little loading icon which I would like to display when a button inside the table is clicked.
When each table row is generated with ng-repeat, the loader shows up in every row rather than the individual one. How can I set ng-show to true or false for only the current index clicked?
Template:
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
Controller:
$scope.someAction = function(recordName) {
$scope.loading = true;
};
You can pass in the $index parameter and set/use the corresponding index. $index is automatically available in the scope of an ng-repeat.
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading[$index]">Loading...</td>
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Here's a generic sample with all the logic in the view for convenience: Live demo (click).
<div ng-repeat="foo in ['a','b','c']" ng-init="loading=[]">
<p ng-click="loading[$index]=true">Click me! Item Value: {{foo}}<p>
<p ng-show="loading[$index]">Item {{$index}} loading...</p>
</div>
There are many ways to handle this.
The problem here is that your variable loading is sharing the scope between the rows.
One approach could be use $index
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
JS
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Using a property in your object record:
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="record.loading">Loading...</td>
</tr>
JS
$scope.someAction = function(record) {
var name = record.name;
record.loading = true;
};
Best regards
The scope inside ng-repeat is different form the one outside. Actually the scope outside ng-repeat is the parent of the one inside. So the html code goes here
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="$parent.loading">Loading...</td>
</tr>