CODEWITHSUNDEEP
angularjs
yellavon
yellavon

Reputation: 2881

Angular default select option being overwritten

My drop down box defaults to "No Preference" which is what I want, but it keeps getting overwritten by the other options when they load in the page. How do I keep "No Preference" as the default.

contact-form.html:

<p>
  <label>Preference</label> 
  <select id="name" class="form-control" ng-init="" ng-model="contact.teammate" ng-options='contact.id as (contact.firstName + " " + contact.lastName) for contact in contacts'>
        <option value="">No Preference</option>
  </select>
</p>

app.js:

var app = angular.module("contactsApp", ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when("/new/contact", {
                controller: "NewContactController",
                templateUrl: "contact-form.html",
                  resolve: {
                    contacts: function(Contacts) {
                        return Contacts.getContacts();                   
                    }
                  }

            })
            .otherwise({
                redirectTo: "/"
            })
    })
    .service("Contacts", function($http) {
        this.getContacts = function() {
            return $http.get("/contacts").
                then(function(response) {
                    return response;
                }, function(response) {
                    alert("Error finding contacts.");
                });
        }
    })
    .controller("NewContactController", function($scope, $location, Contacts) {  
        console.log("Entered new contacts controller");
    Contacts.getContacts().then(function(doc) {
            $scope.contacts = doc.data;
        }, function(response) {
            alert(response);
        });
    });

Upvotes: 0

Views: 124

Answers (1)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

Add

$scope.contact.teammate = '';

just under:

$scope.contacts = doc.data;

This will default it to the option with no value '' or if you want to default to something else just set the value to it.

You also need to define:

$scope.contact = {};

Do it just under:

console.log("Entered new contacts controller");

Here's a Plunker example: https://plnkr.co/edit/4hCSXURbc754IAHU3VyN?p=preview

I used timeout to simulate ajax delay.

Upvotes: 1

Related Questions