Swap two options in angularjs select with plain vanilla javascript?

39 views
Skip to first unread message

intro_dev

unread,
Mar 1, 2019, 8:41:23 AM3/1/19
to Angular and AngularJS discussion
we have a very chaotic angularjs code, completely impossible to refactor, and the problem is the options in a select are in the wrong order:

$scope.dlgXbin120 = {
    name: '',
            title: '',
    sensor_id: 0,
    device_id: 0,
    binindex: 0,
            messchannel: 0,
            measure: 0,
            measureSelect: '0',
    measureOptions: [    
      {id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement},
      {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact}
    ]
    };

    $scope.changeValuedlgXbin120 = function () {
        $scope.dlgXbin120.measureOptions
            =
            [
            {id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement},
            {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact}
            ]
    };

...and is does NOT help to change it to measureSelect: '1':

$scope.dlgXbin120 = {
    name: '',
            title: '',
    sensor_id: 0,
    device_id: 0,
    binindex: 0,
            messchannel: 0,
            measure: 0,
            measureSelect: '1',
    measureOptions: [    
      {id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement},
      {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact}
    ]
    };

    $scope.changeValuedlgXbin120 = function () {
        $scope.dlgXbin120.measureOptions
            =
            [
            {id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement},
            {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact}
            ]
    };

...and it does also not help to change the order with 1 first:

$scope.dlgXbin120 = {
    name: '',
            title: '',
    sensor_id: 0,
    device_id: 0,
    binindex: 0,
            messchannel: 0,
            measure: 0,
            measureSelect: '0',
    measureOptions: [    
      
      {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact},{id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement}
    ]
    };

    $scope.changeValuedlgXbin120 = function () {
        $scope.dlgXbin120.measureOptions
            =
            [
 {id: '1', name: $scope.translate.coreTranslations.register_contact || $scope.translate.coreTranslationsFallback.register_contact},
            {id: '0', name: $scope.translate.coreTranslations.no_measurement || $scope.translate.coreTranslationsFallback.no_measurement}
           
            ]
    };


...because of that that, now i want to use "plain vanilla" javascript:

    window.onload = function(e){   
        try
    {
    var messbin120Elements = document.getElementsByName("messbin120");
    console.log("Length of messbin120Elements: " + messbin120Elements.length);
    messbin120Element = messbin120Elements[0];
    console.log("Length of messbin120Element: " + messbin120Element.length);
   
    // messbin120Element.innerHTML = "";
    var option0 = messbin120Element[0].outerHTML;
    var option1 = messbin120Element[1].outerHTML;   
    // messbin120Element[1].innerHTML = option0;
    // messbin120Element[0].innerHTML = option1;
    messbin120Element.innerHTML = option1 + option0;
    }
    catch(err)
    {
    alert(err);
    }        
    }


...but that does, WTF, also not help. that was the controller part.

the view part (php file) is:

<select name="messbin120" class=" form-control input-sm"
ng-model="dlgXbin120.measureSelect">
<option ng-repeat="option in dlgXbin120.measureOptions"
value="{{option.id}}">{{option.name}}</option>
</select>



how to solve that problem?

thank you very much for your feedbacks.


best regards,
jan

Sander Elias

unread,
Mar 1, 2019, 10:14:16 PM3/1/19
to Angular and AngularJS discussion
Hi Jan,


Regards
Sander
Reply all
Reply to author
Forward
0 new messages