Angular selected option ignoring first array value

Question

I am attempting to use localStorage to remember the user's selection and set the selected option accordingly on their next login.

The select options populate correctly as shown below.

When the index is 1 or above it works correctly, but whenever the first value is selected no value is selected by default on the next reload.

I have illustrated this below:

index of 0 on load

index of 1 on load

What am I doing wrong?

HTML

<select name="ipSelect" data-ng-model="selectedOption">
    <option ng-repeat="ip in adapters track by $index" data-ng-value="adapters.indexOf(ip)">{{ip}}</option>
 </select>

In the controller

ipcRenderer.on('device_ips_loaded', (event, adapters) => {
    let storedIndex = localStorage.getItem('defaultIp') || 0
    console.log('Adapters: ' + adapters)
    console.log('storedIndex: ' + storedIndex)
    $scope.adapters = adapters
    $scope.$apply(function() {
        $scope.selectedOption = adapters[storedIndex]
    })
    console.log('selectedOption: ' + $scope.selectedOption)
})

developer033 · Accepted Answer · 2016-08-06 00:40:41Z

I recommend you to use ngOptions.

See it working:

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.selectedOption = '1';
    $scope.adapters = ['25.91.79.201', '192.168.0.14']
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <div class="col-md-12">
    <select class="form-control" ng-options="key as ip for (key, ip) in adapters" ng-model="selectedOption">
      <option value label="Select an adapter" hidden></option>
    </select>
    <pre ng-bind="selectedOption"></pre>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

Angular selected option ignoring first array value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related