A default choice in my select in angular JS

Question

I am using AngularJS to create a simple application web.

I would like to show the values of city A as a default choice in my select.

index.html

<body ng-controller="MainCtrl">
  <select ng-model="selectedCity"  ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
  </select>

  <select ng-show="selectedCity.subsities" ng-model="selectedSubCity"  ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
   <option style="" value=""></option>
   </select>

  <table>
    <tr ng-repeat="item3 in data track by item3.id">
      <td>{{ item3.id }}</td>
      <td>{{ item3.name }}</td>
      <td>{{ item3.price }}</td>
    </tr>
  </table>

</body>

</html>

And this is my script js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.cities = [
     {
      name: "city A",
      elements: [{
        id: 'c01',
        name: 'name1',
        price: 15
      }, {
        id: 'c02',
        name: 'name2',
        price: 18
      }, {
        id: 'c03',
        name: 'name3',
        price: 11
      }],
      subsities: [ {
          name: "sub A1",
          elements: [{
            id: 'sub01',
            name: 'nameSub1',
            price: 1
          }, {
            id: 'sub02',
            name: 'nameSub2',
            price: 8
          }, {
            id: 'sub03',
            name: 'nameSub3',
            price: 1
          } ]
        },
         {
          name: "sub A2",
          elements: [{
            id: 'ssub01',
            name: 'nameSsub1',
            price: 1
          }, {
            id: 'ssub02',
            name: 'nameSsub2',
            price: 8
          }, {
            id: 'ssub03',
            name: 'nameSsub3',
            price: 4
          } ]
        },
         {
          name: "sub A3",
          elements: [{
            id: 'sssub01',
            name: 'nameSssub1',
            price: 1
          }, {
            id: 'sssub02',
            name: 'nameSssub2',
            price: 2
          }, {
            id: 'sssub03',
            name: 'nameSssub3',
            price: 1
          }]
        }
      ]
    },
     {
      name: "city B",
      elements: [{
        id: 'cc01',
        name: 'name11',
        price: 10
      }, {
        id: 'cc02',
        name: 'name22',
        price: 14
      }, {
        id: 'cc03',
        name: 'name33',
        price: 11
      } ]
    },
    {
      name: "city C",
      elements: [{
        id: 'ccc01',
        name: 'name111',
        price: 19
      }, {
        id: 'ccc02',
        name: 'name222',
        price: 18
      }, {
        id: 'ccc03',
        name: 'name333',
        price: 10
      } ]
    }
  ];
  $scope.extractSubsities = function(itemSelected) {
    if(itemSelected && itemSelected.elements){
        $scope.data = itemSelected.elements;
    } 
  } 

});

I need to show city A as the default selected value How can I fix this please ?

See stackoverflow.com/a/13049740/1392463

Ioan
– Ioan

2016-04-18 14:21:52 +00:00
Commented Apr 18, 2016 at 14:21 — Ioan
– Ioan, Commented Apr 18, 2016 at 14:21

Sarantis Tofas · Accepted Answer · 2016-04-18 16:35:53Z

1

You can use the ng-init directive to initialize your selection. Also you will have to call your extractSubsities() function to populate your table:

 <select ng-model="selectedCity"  ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
  </select>

here is a working fiddle example

edited Apr 18, 2016 at 16:35

answered Apr 18, 2016 at 15:07

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

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

6 Comments

Abderrahim Over a year ago

Yes you script is right but it only set a city A as a default choice but it couldn't prints its values on my table <table> <tr ng-repeat="item3 in data track by item3.id"> <td>{{ item3.id }}</td> <td>{{ item3.name }}</td> <td>{{ item3.price }}</td> </tr> </table>

Sarantis Tofas Over a year ago

@Abderrahim can you check this fiddle, is this what we need? jsfiddle.net/4s77Lt3y

Sarantis Tofas Over a year ago

@Abderrahim the thing is that you can add multiple functions inside ng-init this is the important part of the code ng-init="selectedCity = cities[0];extractSubsities(selectedCity)"

Sarantis Tofas Over a year ago

@Abderrahim its my pleasure mate, if anything is unclear dont hesitate to ask

Abderrahim Over a year ago

Thank you so much please I have something else how to set a default choice in the second select too, for example select sub A1 as a default choice

|

FvB · Accepted Answer · 2016-04-18 14:19:13Z

1

You could set the selected city before the page finishes loading by adding this line to your controller.

Something like this:

$scope.selectedCity = $scope.cities[0].name;

answered Apr 18, 2016 at 14:19

FvB

7236 silver badges16 bronze badges

1 Comment

Abderrahim Over a year ago

if this work with you can you make it in a fiddle example link please

Gershon Papi · Accepted Answer · 2016-04-18 14:20:07Z

1

Just assign selectedSubCity to the default:

$scope.selectedSubCity = $scope.cities[0];

Also call extractSubsities:

$scope.extractSubsities();

answered Apr 18, 2016 at 14:20

Gershon Papi

5,1263 gold badges28 silver badges51 bronze badges

2 Comments

Abderrahim Over a year ago

I added this into my controllers it didn't work with me

Abderrahim Over a year ago

if this work with you can you make it in a fiddle example link please

Collectives™ on Stack Overflow

A default choice in my select in angular JS

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related