ThinkBonobo ThinkBonobo - 1 year ago 36
AngularJS Question

not setting the ng-options select to the predefined ng-model results

I have a value fed in and want it preselected in the select dropdown. The complication is that the model is an object not a simple string. I tried using track by but it does not seem to solve the issue... Maybe you can help?

Let's assume the models in the javascript when the controller loads:

$scope.condition = {name: 'blah', value: '{"id":2,"value":"Monthly Flyer"}' }
$scope.options = [
{"id":1,"value":"Winter Catalog"},
{"id":2,"value":"Monthly Flyer"},
{"id":3,"value":"Sample Catalog"},
{"id":4,"value":"Senior Living"},

Notice how the second one is the same looking object as the first... however, technically it would have a different object reference so

angular.toJson($scope.condition) === angular.toJson(options[1])

$scope.condition === options[1]

Here's the code

<select class="form-control" ng-model="condition.value"
ng-options="opt as (opt.value + ' [' + + ']')
for opt in options.picklistOptions track by"></select>

Why do you think it's not loading?

Answer Source

Well, I'm not sure what you're trying to do, but I think you have an object saved somewhere and you want to select the <option> based on this.

Then, if I'm correct you just made ​​the mistake of having placed the ng-model as condition.value instead of just condition.

See it working:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.options = {};
      $scope.options.picklistOptions = [  
            "value":"Winter Catalog"
            "value":"Monthly Flyer"
            "value":"Sample Catalog"
            "value":"Senior Living"

      $scope.condition = {
        "value":"Monthly Flyer"
<!DOCTYPE html>
<html ng-app="app">

  <script src=""></script>

<body ng-controller="mainCtrl">
  <select class="form-control" ng-model="condition" ng-options="opt as (opt.value + ' [' + + ']') for opt in options.picklistOptions track by"></select>
  <span ng-bind="condition | json"></span>