Set default Value select AngularJS form database

Question

I am new in AngularJS. I'm creating an app about the dynamically users add, edit and delete process. But I'm facing problem when the user edit their data.

When User edit on edit button I want country list to be predefined and state list defined by the selected country, but it does not work. Here is my code:

<select class="form-control" 
        data-ng-model="countrySelectModel" 
        data-ng-change="countrySelectChange(countrySelectModel)" 
        data-ng-options="Country.CountryName for Country in CountryListUpdate track by Country.CountryCode">
    <option value="">Select Country</option>
</select>

and controller

app.controller("VitermineNgAppCLUCtrl", function($scope, countryService) {
   //===== Get Country Change code/value 
   $scope.countrySelectChange = function(countrySelectModel) {
      $scope.$emit('eventName', {
         message: countrySelectModel.CountryCode
      });
   };
   GetAllCLUDetails();

   //==To Get All Records 

   function GetAllCLUDetails() {
      var Data = countryService.getCLU();
      Data.then(function(d) {
         $scope.CountryListUpdate = d.data;
      }, function() {
         alert('Error');
      });
   };
});

How do you try to initialize your `select` ? Your code controller could be interesting to show also. — Pierre-Alexandre Moller, Aug 28 '15 at 11:50
can we have your controller code with record which you got on edit ? — gaurav bhavsar, Aug 28 '15 at 11:51
in angular is you can use ng-options to create a drop down, first you need to have the model to something then you can iterate with ng-options. A fiddler will help us ;) — Radu, Aug 28 '15 at 11:52
Why don't you take a look at the angular docs about this? It's pretty well documented there with some great examples. --> https://docs.angularjs.org/api/ng/directive/select — ArBro, Aug 28 '15 at 11:53
Also a lot of answers about this subject already on SO -> Possible duplicate of [Working with select using Angular's ng-options](http://stackoverflow.com/questions/13047923/working-with-select-using-angulars-ng-options) — ArBro, Aug 28 '15 at 11:54
As others have said, it would be nice if you could put the controller code in your question. From the information you already gave us, it looks like `countrySelectModel` is not correctly initialized in the situation you describe. But that is only a guess. — KevinLH, Aug 28 '15 at 11:55

ArBro · Answer 1 · 2015-08-28T12:11:07.733

I used this fiddle more than once to give an example on this. It might be usefull for you too.

JSFiddle

HTML Example:

<div ng-app="myApp" ng-controller="myAppCtrl">
    <select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
        <option value="">Select location</option>
    </select>
    <select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]">
        <option value="">Select incident</option>
    </select>
</div>

Artiom · Answer 2 · 2015-08-31T11:25:43.240

0

Probably your selected value is wrong. Provide your controller code as mentioned in comments. Here is an example of your html code with sample controller.

function MyCtrl($scope) {
    $scope.CountryListUpdate = [
        {CountryCode: 'DE', CountryName: 'Germany'},
        {CountryCode: 'CY', CountryName: 'Cyprus'},
      ];
    $scope.countrySelectChange = function(countrySelectModel){
      //your code
    };

    var selectedCode = 'CY';//initialize it properly.

    for(var i=0;i<$scope.CountryListUpdate.length;i++){
        if($scope.CountryListUpdate[i].CountryCode === selectedCode){
           $scope.countrySelectModel = $scope.CountryListUpdate[i];
           break;
        }
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <select ng-controller="MyCtrl" class="form-control" 
    data-ng-model="countrySelectModel" 
    data-ng-change="countrySelectChange(countrySelectModel)" 
    data-ng-options="Country.CountryName for Country in CountryListUpdate track by Country.CountryCode">
     <option value="">Select Country</option>
  </select>
</body>

edited Aug 31 '15 at 11:25

answered Aug 28 '15 at 12:05

Artiom

7,694
3
38
45

here How do i Know the index number that u have given in controller $scope.countrySelectModel = $scope.CountryListUpdate[1]; here u working with only 2 code and name but when you go with a learge number of country Code then ? – SoloThink Aug 31 '15 at 11:08
This is my CountryController.js app.controller("VitermineNgAppCLUCtrl", function ($scope, countryService) { //===== Get Country Change code/value $scope.countrySelectChange = function (countrySelectModel) { $scope.$emit('eventName', { message: countrySelectModel.CountryCode }); }; GetAllCLUDetails(); //==To Get All Records function GetAllCLUDetails() { var Data = countryService.getCLU(); Data.then(function (d) { $scope.CountryListUpdate = d.data; }, function () { alert('Error'); }); }; }); – SoloThink Aug 31 '15 at 11:15
@SoloThink please update original answer instead of adding comment with code. – Artiom Aug 31 '15 at 11:18
@SoloThink I don't see any place where you initialize default value. So what are you expecting than? Where do you get the default value? – Artiom Aug 31 '15 at 11:21

Set default Value select AngularJS form database

2 Answers2