find selected value of dropdown in every row of table - javascript

There are multiple rows in a table being created using ng-repeat. Each row has a dropdownlist. I want to get the selected value in a dropdown and attach that value with other corresponding values in the row in a string format using JavaScript or JQuery on click of Next button. eg:"one,B:two,B:three,A:four:C" (here in this example assuming B is selected for dropdown in first row,similar logic for other rows)
The below is the HTML snippet:
<div class="mainDiv" ng-controller="myController">
<div class="div1">
<table class="table myTable">
<thead>
<tr>
<th>
<center>serial</center>
</th>
<th>
<center>data</center>
</th>
<th>
<center>aplhabet</center>
</th>
</tr>
</thead>
<tbody class="myTableBody">
<tr ng-repeat="data in myData" id="{{$parent.$id+'-'+$index}}">
<td>{{$index + 1}}</td>
<td>{{data}}</td>
<td>
<select>
<option value="Select">-- Select --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div2">
<button type="button" class="btn btn-md btn-primary btnNext">Next</button>
</div>
</div>
and below is the angularJS part:
myApp.controller('myController', function ($scope) {
$scope.myData = ["one","two","three","four"];
});

Add an ng-model={ selectData[data] }
Then update the controller with the following
$scope.selectData = {}
getResults= function() {
var returnData = $scope.myData.map(function(data) {
return data + ',' + $scope.selectData[data];
});
return returnData.join(':');
};

Switch to an object.
$scope.myData = {
one: {
id: 'one',
value: null
},
two: {
id: 'two',
value: null
},
three: {
id: 'three',
value: null
},
four: {
id: 'four',
value: null
}
}
In your HTML, add an ng-model to your select
<select ng-model="data.value">
<!-- your options, because I'm lazy -->
</select>
You will get an object containing all you want. In my opinion, I find it easier to work with objects rather than arrays.

Related

How to remove selected option from multiple dropdown on click a button in angular 8

I have select dropdown whose option value comes from the array of object.When I click add button new dropdown will be added and on click delete button particular dropdown will be deleted.On page load select an option(need to onchange the dropdown) then click add button and you will get other dropdown below.Now here requirement is, selected options should not be repeated again into added dropdown after adding a new dropdown. Till now working fine.The problem is all dropdown is getting updated.Here is the code below
https://stackblitz.com/edit/angular-sxfanw?file=src%2Fapp%2Fapp.component.html
app.component.html
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select (change)="onChange($event.target.value)">
<option *ngFor="let title of arraydata" [value]="title.name" >{{title.name}}</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
</td>
</tr>
<tr *ngFor="let field of fieldArray; let i = index">
<td>
<select (change)="onChange($event.target.value)">
<option *ngFor="let title of arraydata" [value]="title.name" >{{title.name}}</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteFieldValue(i)">Delete</button>
</td>
</tr>
</tbody>
</table>
app.component.ts
import { Component ,OnInit} from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fieldArray: Array<any> = [];
newAttribute: any = {};
arraydata = [{"name":"name1","value":1},{"name":"name2","value":2},{"name":"name3","value":3},{"name":"name4","value":4}]
selectedDevice:any;
ngOnInit() {
console.log(this.arraydata)
}
onChange(deviceValue) {
this.selectedDevice = deviceValue;
}
addFieldValue() {
const index = this.arraydata.findIndex(x => x.name ===this.selectedDevice);
console.log(index);
this.arraydata.splice(index, 1);
console.log(this.arraydata);
this.fieldArray.push(this.newAttribute)
this.newAttribute = {};
}
deleteFieldValue(index) {
this.fieldArray.splice(index, 1);
}
}
i've worked on your code and here is how i make it work
first you have to change arraydata to an array of arrays
i = 0;
arraydata = [
[
{ name: "name1", value: 1 },
{ name: "name2", value: 2 },
{ name: "name3", value: 3 },
{ name: "name4", value: 4 }
]
];
and here is the add dropdown method
addFieldValue() {
const arr = [...this.arraydata];
this.arraydata.push(
arr[this.i].filter(x => x.name !== this.selectedDevice)
);
this.fieldArray.push(this.newAttribute);
this.newAttribute = {};
this.i += 1;
}
and your html becomes
<tr>
<td>
<select (change)="onChange($event.target.value)">
<option *ngFor="let title of arraydata[0]" [value]="title.name" >{{title.name}}</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
</td>
</tr>
<tr *ngFor="let field of fieldArray; let i = index">
<td>
<select (change)="onChange($event.target.value)">
<option *ngFor="let title of arraydata[i+1]" [value]="title.name" >{{title.name}}</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteFieldValue(i)">Delete</button>
</td>
</tr>
here is the working code https://stackblitz.com/edit/angular-ujyrdr?file=src/app/app.component.html

DataTables with (filter by) from json data

I am trying make my filter works with json data from the server, someone could help me to do this?
I need filter by places: All, EUA,China, Spain
I am using: jquery.dataTables.js from: https://datatables.net
html:
<div class=" dashboard">
<div class="col-md-8 no-padding">
<div class="form-group col-md-4 no-padding">
<select class="form-control" id="sel1" >
<option value="Filter by">Filter by country </option>
<option value="All">All</option>
<option value="First name">China</option>
<option value="Last name">EUA</option>
<option value="Last name">Spain</option>
</select>
</div>
</div>
<br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Place</th>
</tr>
</thead>
</table>
jquery:
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
} );
$(document).ready(function () {
var url = 'http://www.json-generator.com/api/json/get/crcCiZXZfm?indent=2';
var table = $('#example').DataTable({
ajax: url,
columns: [
{ data: 'name' },
{ data: 'place' }
]
});
});
jsfiddle:
http://jsfiddle.net/ntcwust8/120/
http://jsfiddle.net/f7debwj2/
Added the following code to your document.ready():
$('#sel1').change(function() {
if (this.value === "All") {
table
.columns(1)
.search('')
.draw();
}
else {
table
.columns(1)
.search(this.value)
.draw();
}
});
So basically you tell your SELECT element to wait for its value to be changed. In order to show ALL, the .search() parameter is set to an empty string, which will return ALL. Otherwise the dropdown will trigger a table search on column(1) with the selected VALUE (not text!) of your SELECT and redraw your table.
Note: I also changed the value properties of your SELECT, since they were wrong in the beginning.
DataTables Documentation on column().search() can be found HERE.

Use Tablesorter to filter by selected option's selects in a column

I use the plugin jQuery Tablesorter by Mottie for a long time and it's very useful but today I have a issue. I want to filter my table by the selected options of the selects in one of the columns. The sort works but not the filter.
This is the code HTML :
<table id="tableau-programmes" cellspacing="0" cellpadding="0" class="donnees tablesorter">
<thead>
<tr class="bg-vert-2">
<th>Programme</th><th>No</th><th>Département</th><th>CP</th><th>Ville</th><th>Agence</th><th>Association</th>
</tr>
</thead>
<tbody>
<tr id="18">
<td>Bornéo</td>
<td>44</td><td>Loire-Atlantique</td>
<td>44100</td><td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option>
</select>
</td>
<td><span class="c-vert">Oui</span></td>
</tr>
<tr id="17" class="bg-vert-4">
<td>Erdréa</td>
<td>44</td>
<td>Loire-Atlantique</td>
<td>44300</td>
<td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option></select></td>
<td><span class="c-vert">Oui</span></td>
</tr>
...
</tbody>
</table>
This is the code js :
$(function(){
var nom_prog_preselect = (id_prog_preselect > 0) ? $("tr#"+id_prog_preselect).children('td:first').text() : '';
$.tablesorter.addParser({
id: 'txt_select',
is: function(s) {
return false;
},
format: function(s, table, cell) {
return $(cell).find('select').children('option:selected').text() || s;
},
parsed: true,
type: 'text'
});
$(".tablesorter").tablesorter({
widgets:['zebra','stickyHeaders','filter']
,headers: {
5: { sorter:"txt_select", filter:false }
}
,initialized: function (table, filter, apply) {
$.tablesorter.setFilters( table, [nom_prog_preselect,'','','','','',''], true);
}
});
});
Is there anyone who can help me please ? Thanks.
Instead of creating a custom "txt_select" parser, load the parser-input-select.js file provided with the fork of tablesorter.
That file has two select parsers:
'select' - Stores the selected value
'select-text' - Stores the selected text
and some extra code that is needed when the select value changes to update the internal cache.

Angular select with ng-repeat loses selected option when options are updated

I am trying to create an editor for a dynamic list using AngularJS. For each item I would like to add a select list containing options for all elements in the list. When an item is added to the list (Add button in the JSFiddle), the other selects lose their values. The model is not affected by this, only the view. What am I missing?
Here is my JSFiddle.
View:
<div ng-controller="selectDemoCtrl">{{msg}}
<table>
<tr>
<td>id</td>
<td>references</td>
</tr>
<tr ng-repeat="item in items">
<td>
<input ng-model="item.id" type="number">
</td>
<td>
<select ng-model="item.ref">
<option ng-repeat="i in items" value="i.id" ng-selected="item.ref==i.id">{{i.id}}</option>
</select>
</td>
</tr>
</table>
<button ng-click="addItem()">Add</button>
<div>{{items | json}}</div>
</div>
Controller:
selectDemo.controller('selectDemoCtrl', function ($scope) {
$scope.items = [{
id: 1,
ref: 2
}, {
id: 2,
ref: 1
}];
$scope.addItem = function(){
var newitem = {id: 1, ref:1};
for (var i = 0; i < $scope.items.length; i++){
if ($scope.items[i].id >= newitem.id) { newitem.id = $scope.items[i].id + 1; }
}
if ($scope.items.length > 0){newitem.ref = $scope.items[0].id;}
$scope.items.push(newitem);
};
});
Don't use ngRepeat, it's not reliable for binding model. Use ngOptions instead, it should work as expected:
<select ng-options="i.id as i.id for i in items" ng-model="item.ref"></select>
Demo: https://jsfiddle.net/4bemy5wj/1/

AngularJS ngoptions dropdown

So I am trying to create a dropdown selection menu in angularJS. I can list the contents using ng-repeat:
<table ng-table="tableParams" class="table">
<tr ng-repeat="food in foods">
<td data-title="'Name'">{{food.name}}</td>
</tr>
</table>
which displays for me a list of foods. I would like to turn this into a selection instead.
However no matter what I try it doesn't seem to display.
here is what I had worked on so far:
<select id="food_select"class="form-control"
ng-model="food"
ng-options="item as item.name for item in food track by item.id">
<option value="">(Pick food)</option>
</select>
Here is how I am getting the data:
function getFoodList() {
FoodService.getFoods().then(function (_data) {
$scope.foods= _data.foods;
console.log("foodlist"+JSON.stringify( $scope.foods));
});
}
and here is a json sample:
"id":"540894f9b2a136082606e5f0","created_at":"2014-09-04T16:36:09+0000","updated_at":"2014-09-04T16:36:09+0000","name":"bananas"
JSFiddle Demo
Where option is like your index value of the array food.
HTML
<div ng-app>
<div ng-controller="Ctrl">
<select ng-options="food.option as food.name for food in foods" ng-init="index = 0" ng-model="option[index]">{{food.name}}</select>
</div>
</div>
JS
function Ctrl($scope) {
$scope.foods = [{
option: "1",
name: "apple"
}, {
option: "2",
name: "orange"
}, {
option: "3",
name: "chicken"
}];

Categories