Select const by select drop down - javascript

I am looking for a solution to select different const via select dropdown menu to be shown in a table.
Anyone able to point me in the right direction?
Thanks.
<select id="select" name="select"\>
<option value="1"\>Device 1\</option\>
<option value="2"\>Device 2\</option\>
<option value="3"\>Device 3\</option\>
</select\>
const 1 = [Name: "Name 1", Code: "Code 1", Speed: "10"]
const 2 = [Name: "Name 2", Code: "Code 2", Speed: "20"]
const 3 = [Name: "Name 3", Code: "Code 3", Speed: "30"]
Function to select const by option value?
var text = selected option value
document.getElementById("Name").innerHTML = text.Name;
document.getElementById("Code").innerHTML = text.Code;
document.getElementById("Speed").innerHTML = text.Speed;
+--------------------------------+
| Name: | Selected const Name |
|---------|----------------------|
| Code: | Selected const Code |
|---------|----------------------|
| Speed: | Selected const Speed |
+--------------------------------+
I've tried to above method by cant get it to work.

Put your data in a structure that correlates to your selection process. Here I'm using an array of objects. You could also use an object containing objects as properties if you prefer to retrieve the device data by key instead of numerical index.
Add an event listener for the select element.
Update the DOM with the data by index.
const deviceData = [{
Name: "Name 1",
Code: "Code 1",
Speed: "10"
}, {
Name: "Name 2",
Code: "Code 2",
Speed: "20"
}, {
Name: "Name 3",
Code: "Code 3",
Speed: "30"
}];
document.querySelector('#select').addEventListener('change', event => {
// zero-based index requires deducting 1 from the option value
const user = deviceData[event.currentTarget.value - 1];
document.getElementById("Name").innerHTML = user.Name;
document.getElementById("Code").innerHTML = user.Code;
document.getElementById("Speed").innerHTML = user.Speed;
});
<select id="select" name="select">
<option>Select a device</option>
<option value="1">Device 1</option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select>
<div id="Name"></div>
<div id="Code"></div>
<div id="Speed"></div>

You will want to use objects not arrays and attach an event listener to the select.
Objects allow you to use non numerical and more dynamic keys.
let device = document.querySelector("#select");
let devices = {
"1": {
Name: "Name 1",
Code: "Code 1",
Speed: "10"
},
"2": {
Name: "Name 2",
Code: "Code 2",
Speed: "20"
},
"3": {
Name: "Name 3",
Code: "Code 3",
Speed: "30"
}
};
device.addEventListener("change", function() {
let deviceID = this.value;
let selDevice = devices[deviceID];
if (selDevice) {
document.getElementById("Name").innerHTML = selDevice.Name;
document.getElementById("Code").innerHTML = selDevice.Code;
document.getElementById("Speed").innerHTML = selDevice.Speed;
}
});
<select id="select" name="select">
<option value="">Select a device</option>
<option value="1">Device 1</option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select>
<div id="Name"></div>
<div id="Code"></div>
<div id="Speed"></div>

Why don'T you try an assoc array?
const array = {
"1" : {Name: "Name 1", Code: "Code 1", Speed: "10"},
"2" : {Name: "Name 2", Code: "Code 2", Speed: "20"},
"3" : {Name: "Name 3", Code: "Code 3", Speed: "30"}
}
Console.log(array[1].Name);

Related

I can not display the default item in the select AngularJS

I'm trying to do that when I set the board, list should be updated , if it is empty it will show n / a if it does not display the number 0 in the list. But I have a problem such that when I set an board which has 4 lists. Then I will set the list to the last position, for example 4 and then I will set an array that does not have lists. I have not set default n / a, only in the drop-down list.
I tried set $scope.selectedList = '0'; And it works in case of changing boards where there are lists but not where they are not.
Please Help.
Here is the code:
template in controller
$scope.changeBoard = (_id) => {
var params = {
_id: _id
};
return ApiService.staff.selectedBoard(params).then((resp) => {
if (resp.lists.length === 0 || !resp.lists) {
$scope.downloadedLists.lists = [];
$scope.selectedList = '0';
} else {
$scope.downloadedLists = resp;
if (_id === $scope.board._id) {
$scope.selectedList = $scope.mainList;
$scope.selectedCard = $scope.mainCard;
} else {
$scope.selectedList = '0';
$scope.selectedCard = '0';
}
}
});
};
template html
<div class="transfer-btn">
<span>Tablica</span>
<span>{{board.name}}</span>
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in boards" value="{{item._id}}">
{{item.name}}
</option>
</select>
</div>
<div class="transfer-btn">
<span>Lista{{selectedList}}</span>
<span>{{board.name}}</span> {{selectedListIn}}
<select class="form-control" name="" id="" ng-model="selectedList" ng-change="">
<option ng-repeat="item in downloadedLists.lists" value="{{$index}}">
{{item.list}}
</option>
<option value="0" ng-show="downloadedLists.lists.length == 0">n/a</option>
</select>
</div>
Do you have some of test data ?
It should good for you to test and debug if you will have a test data like following example. The following example design the test data to 5 sizes starting from 0 to 4. After that you should trial and see the result one by one.
What is the result when your input data is boardDataTest0 ?
What is the result when your input data is boardDataTest1 ?
What is the result when your input data is boardDataTest2 ?
What is the result when your input data is boardDataTest3 ?
What is the result when your input data is boardDataTest4 ?
Then it will help to give you some clue to test and debug in next step.
Test Data 0:
var boardDataTest0 = [];
Test Data 1:
var boardDataTest1 = [
{"id":1, "name": "board1", "description": "bla..bla..bla1" }
];
Test Data 2:
var boardDataTest2 = [
{"id":1, "name": "board1", "description": "bla..bla..bla1" },
{"id":2, "name": "board2", "description": "bla..bla..bla2" }
];
Test Data 3:
var boardDataTest3 = [
{"id":1, "name": "board1", "description": "bla..bla..bla1" },
{"id":2, "name": "board2", "description": "bla..bla..bla2" },
{"id":3, "name": "board3", "description": "bla..bla..bla3" }
];
Test Data 4:
var boardDataTest4 = [
{"id":1, "name": "board1", "description": "bla..bla..bla1" },
{"id":2, "name": "board2", "description": "bla..bla..bla2" },
{"id":3, "name": "board3", "description": "bla..bla..bla3" },
{"id":4, "name": "board4", "description": "bla..bla..bla4" }
];

How to select default drop-down option in select list in Angular JS

I have the following select option :
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
I want to set default option MemberClass[0] to select option. I tried the following code but not working.
The JSON data is coming from Webservice...
//To fetch Member Class
$http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
$scope.MemberClass = response.data.list;
$scope.class_name = $scope.MemberClass[0]; // Not working
});
Member class JSON data is :
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview
(Am getting error if I not select any option...)
You can utilize ng-options for this. It is the preferred way most of the times. Like this:
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
Now, since you have $scope.class_name assigned as default value, it will be selected already.
working example
Use ng-init. Try like below.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="Ctrl">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Member Class </label>
<div class="col-md-4">
<select ng-model="class_name"
ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass">
</select>
<p>Selected Value: {{class_name}} <p>
</div>
</div>
<button type="submit" ng-click="alertdata()">Save</button>
<script>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
var MemberClass;
$scope.MemberClass = [{
"sub_class_id": 1,
"sub_class_name": "Primary"
},
{
"sub_class_id": 2,
"sub_class_name": "Secondary "
},
{
"sub_class_id": 3,
"sub_class_name": "Dependent "
},
{
"sub_class_id": 4,
"sub_class_name": "Sub Member"
},
{
"sub_class_id": 5,
"sub_class_name": "None"
}
]
// $scope.class_name = $scope.MemberClass[0];
$scope.alertdata = function() {
$scope.class_name = "{}";
var parameter;
parameter = {
"member": {
"first_name": "first_name",
"role": [{
"role_id": 4
}],
"associated": "associated",
"class0": [JSON.parse($scope.class_name)],
"contect": [{
"intercom": "intercom"
}],
"individualdetails": [{
"gender": "gender"
}]
},
"address": [{
"street_address_1": "street_address_1"
}]
}
console.log(JSON.stringify(parameter));
};
});
</script>
</body>
</html>
You should definitly use ng-options for this
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>

Angular Drop down with dependencies on first drop down

I have two drop down fields where the second one is dependent on the selection in the first.
The data for the first drop down comes from one data set. It lists the number associated with an account ng-repeat="option in acctList": 1, 4 and 7.
I want to go to a different data set, find the account numbers that match, and then show the Customers that are related to that account. (account 1 has customers 1-2, account 4 has customers 3-4, and account 7 has customers 5-7). The second drop down should show nothing (blank) when nothing has been selected in the first.
Here is my plunker with the two drop downs: http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
Here is my controller:
angular.module("app", [])
.controller("MainCtrl", function($scope) {
$scope.test = "This is a test";
$scope.defnum = 1;
$scope.acct_info = [
{
"Req": "MUST",
"DefCom": "1"
},
{
"Req": "NoMUST",
"DefCom": "5"
},
{
"Req": "MUST",
"DefCom": "4"
},
{
"Req": "MUST",
"DefCom": "7"
}
];
$scope.cust_info = [
{
"Customer": "1",
"Com": "1"
},
{
"Customer": "2",
"Com": "1"
},
{
"Customer": "3",
"Com": "4"
},
{
"Customer": "4",
"DefCom": "4"
},
{
"Customer": "5",
"DefCom": "7"
},
{
"Customer": "6",
"DefCom": "7"
},
{
"Customer": "7",
"DefCom": "7"
}
];
});
I added ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" to try to filter the second based on this SO answer: Filter ng-options from ng-options selection
But it's not working.
I've tried using ng-change, but I think there should be an easier way, like a filter or track by. I'm wondering also if I should change from ng-repeat to ng-option. Anyone have insight on an easy way to do this?
Use ng-if in your second <option> tag, may it is, whatever you want
<select>
<option ng-selected="defnum == option.DefCom" ng-repeat="option in acct_info | filter:{Req:'MUST'}:true">
{{ option.DefCom }}
</option>
</select>
<select>
<option ng-if="option.DefCom" ng-selected="" ng-repeat="option in cust_info">
{{ option.Customer}}
</option>
</select>

AngularJS select not populating dynamically

I have the following JSON (test JSON as how it comes from the server):
$scope.allCategoriesAndSubcategories = {
"category" : {
"categoryname" : "pasteleria",
"subcategory" : [
{"subcategoryname" : "pastel tradicional", "subcategoryid" : "1"},
{"subcategoryname" : "pastel con fondant", "subcategoryid" : "2"}
]
},
"category" : {
"categoryname" : "eventos",
"subcategory" : [
{"subcategoryname" : "boda", "subcategoryid" : "1"},
{"subcategoryname" : "cumpleanos", "subcategoryid" : "2"}
]
}
};
Then on the select in the HTML I do the following:
<div input-field>
<select material-select
ng-model="picture.category1" required>
<optgroup ng-repeat="category in allCategoriesAndSubcategories" label="{{category.categoryname}}">
<option value="{{category.subcategory.subcategoryid}}">{{category.subcategory.subcategoryname}}</option>
</optgroup>
</select>
<label>Categoría #2</label>
</div>
When I console.log() I get the actual object so it's not undefined, however the select is not populating. Should I do something else to populate it? I'm new to angularJS and I can't find an example similar to this one
The HTML is invalid if you wish to create list of options
<div input-field>
<select material-select ng-model="picture.category1" required>
<optgroup ng-repeat="category in allCategoriesAndSubcategories" label="{{category.categoryname}}">
<option ng-repeat="subcategory in category.subcategory" value="{{subcategory.subcategoryid}}">{{subcategory.subcategoryname}}</option>
</optgroup>
</select>
<label>Categoría #2</label>
</div>
then after you select element the model picture.category1 should be populated
working plunker http://codepen.io/maurycyg/pen/PZpRRy
also your data should be formatted differently
$scope.allCategoriesAndSubcategories = [{
"categoryname": "pasteleria",
"subcategory": [{
"subcategoryname": "pastel tradicional",
"subcategoryid": "1"
}, {
"subcategoryname": "pastel con fondant",
"subcategoryid": "2"
}]
}, {
"categoryname": "eventos",
"subcategory": [{
"subcategoryname": "boda",
"subcategoryid": "1"
}, {
"subcategoryname": "cumpleanos",
"subcategoryid": "2"
}]
}];
});
I think that proble is here
<option value="{{category.subcategory.subcategoryid}}">
Subcategory is array, and i think that you should use new ng-repeat to make list of <option> tags

Angular ngRepeat multiple select fields without displaying already selected data through ng-options

So the overview of the problem; I am retrieving data from an api and creating a CRUD page for it. The data has a set of labels that the user can select.
Below is a code sample representing my problem. The labels selected by the user are represented by the user.labels relationship and the total available labels that can be selected are represented by user.parent.grandparent.labels.
I'm able to sync the selection. What I can't seem to figure out is how to get rid of options that have already been selected from the list of options on any other subsequent select field.
angular.module('app', [])
.controller('select', ['$scope', '$filter', '$location',
function($scope, $filter, $location) {
$scope.user = {
"parent": {
"grandparent": {
"labels": [{
"id": 28,
"name": "Label 1",
}, {
"id": 17,
"name": "Label 2",
}, {
"id": 39,
"name": "Label 3",
}, {
"id": 77,
"name": "Label 4"
}, {
"id": 100,
"name": "Label 5"
}]
}
},
"labels": [{
"id": 28,
"name": "Label 1",
"meta": {
"score": 3
}
}, {
"id": 17,
"name": "Label 2",
"meta": {
"score": 5
}
}]
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<div ng-repeat="label in user.labels track by $index">
<div class="form-field">
<span>Label</span>
<select ng-model="user.labels[$index]" ng-options="department.name for department
in user.parent.grandparent.labels track by department.id">
</select>
</div>
<div>
<span>Score</span>
<select ng-model="label.meta.score">
<option value="1">1 (lowest)</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5 (highest)</option>
</select>
</div>
</div>
<button ng-click="user.labels.push({})">Add Label</button>
</div>
You can use a filter function inside the ng-repeat to achieve this, here is a sample Codepen showing you how:
http://codepen.io/anon/pen/ZYveOo
You need to pass the filter in the repeat definition:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | filter:removeSelected track by department.id ">
Which refers to this function on scope:
$scope.removeSelected = function(val){
return !_.find($scope.user.labels, function(label) {
return label.id === val.id;
});
};
Even then though I think you are missing one use case which is that you want to be able to have the currently selected label included in the options, by removing all selected options you are removing that ability.
Updated:
Ok then, so after giving this some thought I have come up with the following filter which could be optimised but does seem to work as expected:
.filter('duplicatesFilter', function() {
return function(items, index, selected) {
var res = [selected[index]];
_.forEach(items, function(item){
if(!_.find(selected, function(label) {
return label.id === item.id;
})){
res.push(item);
}
});
return res;
};
})
Use it like so:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | duplicatesFilter:$index:user.labels track by department.id "></select>
This is something I have hit a few times and each time I've worked around it. I'll take a look later if I can find a custom filter that better solves the problem and if I can't I'll tidy up this code and release one; however this should be good to go for your use-case.
Working code-pen:
http://codepen.io/anon/pen/ZYveOo

Categories

Resources