How to set default value of select box with non-existed value in Angularjs

Question

Maybe this can has duplicated or maybe there's a way to solve this,

but I couldn't find any way to solve this.

So please don't be angry with my silly question and give me some information or way to solve this.

Please see this fiddle.

Set default value of select box

What I want is, when I get array from http call,

how to set default value of select box with the value which is not in array.

I've used ng-init but it didn't work.

I know there are other ways to solve this like using <options> tag and put first value of option or

using selected but I want to use ng-options.

No matter what you give is a link, doc, or something, it'll be great help to me.

I'll wait for your any comments or answers. :)

Manoj Patidar · Accepted Answer · 2017-09-29 04:50:58Z

2

First solution you can add one more option tag for default value

Html Code

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

    </div>
</div>

Controller Code

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

Working code

Second Solution : you just add one more item in your array list after get from http call

Html Code

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <select ng-options="opt as opt for opt in testOpt"
                data-ng-model="resultOpt"
                data-ng-change="checkResultOpt(resultOpt)">
        </select>

    </div>
</div>

Controller Code :

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

Working Code

hope this will help you

answered Sep 29, 2017 at 4:50

Manoj Patidar

1,1712 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Canet Robern Over a year ago

Your fiddle looks almost near to my purpose. What I really want is when I select a category, default value have to disappear. But thank you for give me some hints!

Collectives™ on Stack Overflow

How to set default value of select box with non-existed value in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related