Angular: Setting default value in a dropdown

Question

I have set up a plunker with basically below code. I am unable to see the default value [Bank Account Number] getting selected in the drop down. I see that model is getting updated. But for some reasons, my default value do not get chosen. Can someone help me?

//index.html
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
  <script src="script.js"></script>
  <script src="services.js"></script>
</head>

<body ng-controller="homeCtrl">
  <h1>Other Criteria: {{ otherCriteria.optionText }}</h1>
  <div>
    <select data-ng-model="otherCriteria"
      data-ng-options="o as o.optionText for o in criteria">
    </select>
  </div>
</body>

</html>

//services.js
app.factory("homeService", [
  "$q",
  function($q) {
    function _getDropdownValues() {
      var deferred = $q.defer();

      var dropdownValues = [{"optionValue":"Bank_Account_Number","optionText":"Bank Account Number","selected":false},{"optionValue":"Bank_Security_Number","optionText":"Bank Security Number","selected":false},{"optionValue":"Cusip","optionText":"Cusip","selected":false},{"optionValue":"Transaction_Description","optionText":"Description","selected":false}];
      deferred.resolve(dropdownValues);
      return deferred.promise;
    }

    return {
      getDropdownValues: _getDropdownValues
    }
  }
]);

//script.js
var app = angular.module("app", []);

app.controller("homeCtrl", function($scope, homeService) {

  $scope.otherCriteria = {
    optionValue: "Bank_Account_Number",
    optionText: "Bank Account Number",
    selected: false
  };

  homeService.getDropdownValues()
    .then(function(dropdownValues) {
      $scope.criteria = dropdownValues;
    })
});

Lucas Rodriguez · Accepted Answer · 2015-12-10 20:12:44Z

4

Try this plunker.

It's always a better idea to reference a default value via the index of the collection (however you want to reference it)

 $scope.criteria = dropdownValues;
 $scope.otherCriteria = $scope.criteria[0];

You can find more information here

Basically: Angular.JS uses native JavaScript comparison for comparing the objects. In JavaScript, unrelated to Angular.JS or anything, comparing objects (object literals) is “by reference”, so it doesn’t factor the similarity of the objects. Only checks if the two references compared point to the same object in memory or not

edited Dec 10, 2015 at 20:12

answered Dec 10, 2015 at 5:54

Lucas Rodriguez

1,2036 silver badges15 bronze badges

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

4 Comments

sirrocco Over a year ago

you should also explain why it's better

user007 Over a year ago

@Lucas, could you please explain why it should be done this way. If I go with your approach, I will have to assign $scope.otherCriteria only after loading $scope.criteria. Unlike in my plunker, I need to assign $scope.otherCriteria first, fill some other sections in the page and then load the $scope.criteria.

Lucas Rodriguez Over a year ago

You can find more information here: gurustop.net/blog/2014/01/28/… Basically: Angular.JS uses native JavaScript comparison for comparing the objects. In JavaScript, unrelated to Angular.JS or anything, comparing objects (object literals) is “by reference”, so it doesn’t factor the similarity of the objects. Only checks if the two references compared point to the same object in memory or not.

user007 Over a year ago

That was helpful. Could you edit and add this information also to your answer to accept it?

Collectives™ on Stack Overflow

Angular: Setting default value in a dropdown

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related