Search code examples
angularjsng-options

Select default option with ng-options using a flat array

I'm generating <option>'s with ng-options using a flat array. The problem I'm having is selecting the default option element I already have defined. Seems to be a very simple task and there's tons and tons of similar questions using objects or array of objects, but everything I have found and tried for my situation does not work.

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <select ng-options="opt as opt for opt in testOpt" data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = '';
}]);

What I'm trying to do is select the "Choose Category" option by default. As plenty of others have already suggested in other questions, I have tried to use $scope.resultOpt = '' in my controller and even tried ng-init="resultOpt = ''", but does that not work at all. This works great for an array of objects, or objects but not with simple arrays. I also do not want to go outside of the AngularJS framework, I don't like mixing and matching vanilla and AngularJS code, things become messy.

I found an existing jsFiddle that is working for AngularJS 1.4.8, but at least for AngularJS 1.7.8, this is not working when used with a flat array. Not sure if it was functionality that was removed in later versions, or it's simply a bug.

Full example: https://jsfiddle.net/v4uesg02/4/

How can I select the "Choose Category" option by default using a flat array without going outside of AngularJS framework?

Solution

  • How to select the hard-coded null option with ng-options and ng-model

    To select the single hard-coded <option>, assign null to the model:

    angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  ̶$̶s̶c̶o̶p̶e̶.̶r̶e̶s̶u̶l̶t̶O̶p̶t̶ ̶=̶ ̶'̶'̶;̶
  $scope.resultOpt = null;
}]);

    From the Docs:

    Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.

    For more information, see

    The DEMO

    angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {

  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = null;
}]);
  
    <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">

    <select ng-options="opt as opt for opt in testOpt"
            data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>

    <br><br>
    <button ng-click="resultOpt=null">Reset</button>
 
</body>