ng-option set default value in Angularjs

Question

I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.

My problem is that I have 3 cascading selects with one model.

default values

vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';

html

<div class="col-md-4">
    <label for="branch">
        <strong>Branch</strong>
    </label>
    <select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
    </select>
    <small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
    <label for="building">
        <strong>Building</strong>
    </label>
    <select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
    </select>
</div>
<div class="col-md-4">
    <label for="roomFloor">
        <strong>Room Floor</strong>
    </label>
    <select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
    </select>
</div>

vm.locations data

[
{
    "_id": "5a681380b7c41e7df2076819",
    "branch": "Lucena",
    "__v": 0,
    "building": [
        {
            "name": "MHQ",
            "floors": [
                "Ground Floor",
                "2nd Floor",
                "3rd Floor"
            ]
        }
    ],
    "dateCreated": "2018-01-24T05:02:56.465Z"
},
{
    "_id": "5a681aecb7c41e7df207681d",
    "branch": "Lucban",
    "__v": 0,
    "building": [
        {
            "name": "MHQ1",
            "floors": [
                "ground floor",
                "2nd floor"
            ]
        }
    ],
    "dateCreated": "2018-01-24T05:34:36.775Z"
}]

I'm a little confused as to what is going on there but you shouldn't expect vm.roomData.branch.building to be anything because branch doesn't have any property called building unless I'm missing something. Also it would be less confusing if you didn't call everything loc. — Z2VvZ3Vp
– Z2VvZ3Vp, Commented Jan 24, 2018 at 6:27
@PixMach actually its working problem is that I'm having trouble binding a default value. This is for my edit location page so i really need to bind the default value. I'm sorry that my explanation is like this im not really good at explaining in english. — code.cycling
– code.cycling, Commented Jan 24, 2018 at 6:36

Aswin Ramesh · Accepted Answer · 2018-01-24 06:41:43Z

2

try initializing the default values like this,

   $scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena'); 
   $scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
   $scope.roomData.roomFloor = '3rd Floor' ;

like

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  var vm = this;
  vm.roomData = {};
  vm.locations = [{
      "_id": "5a681380b7c41e7df2076819",
      "branch": "Lucena",
      "__v": 0,
      "building": [{
        "name": "MHQ",
        "floors": [
          "Ground Floor",
          "2nd Floor",
          "3rd Floor"
        ]
      }],
      "dateCreated": "2018-01-24T05:02:56.465Z"
    },
    {
      "_id": "5a681aecb7c41e7df207681d",
      "branch": "Lucban",
      "__v": 0,
      "building": [{
        "name": "MHQ1",
        "floors": [
          "ground floor",
          "2nd floor"
        ]
      }],
      "dateCreated": "2018-01-24T05:34:36.775Z"
    }
  ];

  vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
  vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
  vm.roomData.roomFloor = '3rd Floor' ;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl as vm">
  <div class="col-md-4">
    <label for="branch">
        <strong>Branch</strong>
    </label>
    <select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
    </select>
    <small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
    <label for="building">
        <strong>Building</strong>
    </label>
    <select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
    </select>
</div>
<div class="col-md-4">
    <label for="roomFloor">
        <strong>Room Floor</strong>
    </label>
    <select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
    </select>
</div>
</body>

edited Jan 24, 2018 at 6:41

answered Jan 24, 2018 at 6:27

Aswin Ramesh

1,6741 gold badge13 silver badges13 bronze badges

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

2 Comments

code.cycling Over a year ago

Thank you very much man. Can you also make it that if select a branch the building and room floor will remove their value ? cheers thanks again.

Aswin Ramesh Over a year ago

you can use ng-change like ` ng-change="vm.roomData.building = ''; vm.roomData.roomFloor = '';"`

Collectives™ on Stack Overflow

ng-option set default value in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related