Show a default choice in my select in angular JS

Question

Hello I am using AngularJS I am developing a simple application, I have some data in my json.

data.json:

[{
        "name": "city A",
        "elements": [{
          "id": "c01",
          "name": "name1",
          "price": "15",
          "qte": "10"
        }, {
          "id": "c02",
          "name": "name2',
          "price": "18,
          "qte": "11"
        }, {
          "id": "c03",
          "name": "name3",
          "price": "11",
          "qte": "14"
        }],
        "subsities": [{
          "name": "sub A1",
          "elements": [{
            "id": "sub01",
            "name": "nameSub1",
            "price": "1",
            "qte": "14"
          }, {
            "id": "sub02",
            "name": "nameSub2",
            "price": "8",
            "qte": "13"
          }, {
            "id": "sub03",
            "name": "nameSub3",
            "price": "1",
            "qte": "14"
          }]
        }, {
          "name": "sub A2",
          "elements": [{
            "id": "ssub01",
            "name": "nameSsub1",
            "price": "1",
            "qte": "7"
          }, {
            "id": "ssub02",
            "name": "nameSsub2",
            "price": "8",
            "qte": "1"
          }, {
            "id": "ssub03",
            "name": "nameSsub3",
            "price": "4",
            "qte": "19"
          }]
        }, {
          "name": "sub A3",
          "elements": [{
            "id": "sssub01",
            "name": "nameSssub1",
            "price": "1",
            "qte": "11"
          }, {
            "id": "sssub02",
            "name": "nameSssub2",
            "price": "2",
            "qte": "15"
          }, {
            "id": "sssub03",
            "name": "nameSssub3",
            "price": "1",
            "qte": "15"
          }]
        }]
      }, {
        "name": "city B",
        "elements": [{
          "id": "cc01",
          "name": "name11",
          "price": "10",
          "qte": "11"
        }, {
          "id": "cc02",
          "name": "name22",
          "price": "14",
          "qte": "19"
        }, {
          "id": "cc03",
          "name": "name33",
          "price": "11",
          "qte": "18"
        }]
      }, {
        "name": "city C",
        "elements": [{
          "id": "ccc01",
          "name": "name111",
          "price": "19",
          "qte": "12"
        }, {
          "id": "ccc02",
          "name": "name222",
          "price": "18",
          "qte": "17"
        }, {
          "id": "ccc03",
          "name": "name333",
          "price": "10",
          "qte": "5"
        }]
      }];

I call my data here.

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/controllers/data.json').then(function(response) {
            $scope.cities = response.data;
  });
  $scope.extractSubsities = function(itemSelected) {
    if (itemSelected && itemSelected.elements) {
        $scope.data = itemSelected.elements;
    }
  }
 }]);

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" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
  </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>

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

Possible duplicate of [how to use ng-option to set default value of select element](http://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element) — chresse, May 13 '16 at 14:37

Hitmands · Answer 1 · 2016-05-13T14:58:17.933

0

You just need pass a reference to ngModel. $scope.selectedCity = data[0];

angular
  .module('test', [])
  .value('data', [
    "Rome", "Bologna", "New York", "London", "Paris"
  ])
  .controller('TestCtrl', function TestCtrl($scope, data) {
    $scope.items = data;
    $scope.val = $scope.items[1];
  })
;

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

<section ng-app="test">
  <article ng-controller="TestCtrl">
    <select ng-model="val" ng-options="item for item in items"></select>
  </article>
</section>

edited May 13 '16 at 14:58

answered May 13 '16 at 14:36

Hitmands

13,491
4
34
69

I add this $scope.selectedCity = data[0]; on my script but doesn't work with me. can you show me how please ! – Abderrahim May 13 '16 at 14:42

Elka · Accepted Answer · 2016-05-13T14:54:17.130

0

Try update the controller as:

angular.module('app', []).controller('MainController', ['$scope', '$http',function($scope, $http) {
$http.get('js/controllers/data.json').then(function(response) {
        $scope.cities = response.data;
        $scope.selectedCity = $scope.cities[0];
        $scope.data = $scope.selectedCity.elements;
});
 $scope.extractSubsities = function(itemSelected) {
  if (itemSelected && itemSelected.elements) {
    $scope.data = itemSelected.elements;
  }
}
}]);

edited May 13 '16 at 14:54

answered May 13 '16 at 14:46

Elka

227
1
9

But i can't load data of this choise selected in my table – Abderrahim May 13 '16 at 14:51
Thank you so much for you help – Abderrahim May 13 '16 at 15:04
You are welcome. Also don't forget to handle empty result list of cities. – Elka May 13 '16 at 15:08

Show a default choice in my select in angular JS

2 Answers2