CODEWITHSUNDEEP
javascriptangularjs
Bbit
Bbit

Reputation: 442

adding option to select gets automatically selected

I have a dropdown which uses ng-options (angular). I have a default option selected with an empty value. (so it has the "selected" attribute and same value as the model)

Whenever I add another element to the ng-options, which is not empty, if the model has an empty value (which is pointing to the default empty option), the new added option is automatically selected. The value of the model is still empty, but the dropdown now shows the new added option automatically. I've also tried to make the default option be " " instead of just "", but it still does the same change.

Any way to guarantee new added options are not automatically selected?

`<select class="form-control section" ng-model="action.prop">
            <option value="" disabled selected>Select Property</option>
            <option ng-repeat="prop in tr.props| orderBy:prop.name"
            value="{{prop.name}}"> {{prop.name}} </option>
</select>`

Upvotes: 0

Views: 422

Answers (3)

Bbit
Bbit

Reputation: 442

Even though Roth's solution would work well in my case. So would Nishant's if I used ng-options and a filter.

I decided instead, on the ng-repeat, to have an ng-if="prop.name != ''". Since what was happening for me was that for about a second, ng-repeat would have latest prop with empty name for a second, and as ng-model = "", it was setting that option as selected.

<select class="form-control section" ng-model="action.prop">
        <option value="" disabled selected>Select Property</option>
        <option ng-if="prop.name != ''" ng-repeat="prop in tr.props| orderBy:prop.name"
        value="{{prop.name}}"> {{prop.name}} </option>
</select>

Upvotes: 0

Roth
Roth

Reputation: 93

You can simply just set your ng-model in the controller to the following before running your get dropdown function. This way it will always be set to default.

Controller

$scope.action = {};
$scope.action.prop = '';

Upvotes: 1

Nishant Dixit
Nishant Dixit

Reputation: 5522

Try this :)

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selectedName" ng-options="x for x in names">

        </select>

        <p>{{selectedName}}</p>

        <button ng-click="add()">add</button>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.names = [""];
            $scope.selectedName = $scope.names[0]
            $scope.add = function() {
                $scope.names.push("new");
            }

        });
    </script>


</body>

</html>

Upvotes: 1

Related Questions