Angular: How do i check if the select-element is multiple and set a selected option?

Question

An Angular Service, responsible to build URLs from values of select and multi-select elements drives me crazy.

A multi-select uses an array to store its selected values, even if there is only one element.

{
    "select006": [
        "m30x1.5",
        "m18x1"
    ]
}

{
    "select006": [
        "m30x1.5"
    ]
}

A single select uses simply an string to store its selected value.

{
    "select006": "m30x1.5"
}

How do i deal with that issue? How do i check if the select-element is multiple or not and set the selected option to the specific value(s)?

Here is the relevant code:

/**
 * Expand multiple values
 *
 * Convert param values back to an object with array
 * of values.
 * 
 * @example ?param=m30x1.5,m18x1 becomes {"select006": ["m30x1.5","m18x1"]}
 * 
 * @param filters
 * @returns {object}
 * @private
 */
var _expandMultipleValues = function (filters) {

    var param = {};

    for (var filter in filters) {
        if (filters.hasOwnProperty(filter)) {
            if (filters[filter].indexOf(',') > -1) {
                param[filter] = filters[filter].split(',');
            } else {
                 // multiple needs to be an array to set selected option
                 // param[filter] = [filters[filter]];

                 // singe needs to be an string to set selected option
                 // param[filter] = filters[filter];
            }
        }
    }

    return param;
};

It seems i need to be more specific. The Problem here is that i need an array to set a selected option for multiple selects (even if only one is selected) but a string for a single select.

I've a variable in $scope wich holds the selected elements:

$scope.filter = {
    "SA152": ["lorem", "ipsum"],
    "SA044": ["30mm"],
    "SA034": "m8x3"
}

If i try to set the selected option for SA044 with "SA044": '30mm' the multiple select won't be selected as in angular a multiple selection needs to be an array.

This sets the selected option for a multi select:

$scope.filter = {
    "SA044": ['30mm']
}

This does not work for a multi select:

$scope.filter = {
    "SA044": "30mm"
}

Vice versa for single select elements.

Answer 1

Well, you can check if a variable is an array or string using instanceOf or typeOf or .constuctor: See here http://tobyho.com/2011/01/28/checking-types-in-javascript/

 if(myVariable instanceOf Array){
     //multi select
 } else if(myVariable.constructor === String){
     //single select
 }

---

or you can simply convert your string to an array and check the length of the array.

 $scope.myVariable = $scope.myPreviousVar.split(','); // or however you want to delimit this
 if($scope.myVariable.length === 1){
     //single select
 } else if($scope.myVariable.length > 1){
     //multi select
 }

Answer 2

Assuming that your input could be:

$scope.data = {
    "select006": "m30x1.5"
}

or

$scope.data = {
    "select006": [
        "m30x1.5"
    ]
}

Check if the value of select006 is Array. if so, it's a multi-select otherwise, it's a single select.

if ($scope.data.select006 instanceof Array) 
{
    // this is a multi-select, 
    // $scope.data.select006 is an array of selections
} 
else 
{
    // this is a single-select, 
    // $scope.data.select006 is the single selection value
}