CODEWITHSUNDEEP
angularjs
RandomUs1r
RandomUs1r

Reputation: 4188

Update Angular dropdown after insert and select new value

I'm fairly new to Angular and was wondering how I can update a dropdown after doing an insert and have the new value selected?

I tried the following:

<select class="form-control" ng-model="selectedCompany" ng-change="GetCompany()"
        ng-options="company.key as company.value for company in CompanyList">
     <option value="">Select a Company</option>
</select>

This populates a list of companies when the page 1st loads and the inserted data is returned to scope + it's id.

To add the new value without refreshing the page, I'm trying the following non-working (almost) code:

var key = $scope.company.id;
var value = $scope.company.name;

$scope.CompanyList.push({ key: value });

$scope.selectedCompany = $scope.company.id;

This seems to add a value to the dropdown, but it's showing up blank. It's also not selecting the blank value (which should be the new company name), any help would be appreciated.

Upvotes: 1

Views: 3387

Answers (3)

Leonardo Chaia
Leonardo Chaia

Reputation: 2835

It seems that when you create the new company object, you need to assign the value property which is the display name. Here's a code snippet:

angular.module("myApp", [])
  .controller("testCtrl", function() {
    this.companyList = [{
      key: 1,
      value: "Company A"
    }];
    var ctrl = this;
    this.addCompany = function() {
      ctrl.companyList.push({key:2, value:"Company B"});
      ctrl.selectedCompany = 2;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="testCtrl as ctrl">
  <select class="form-control" 
      ng-model="ctrl.selectedCompany" 
      ng-options="company.key as company.value for company in ctrl.companyList">
        <option value="" disabled>Select a Company</option>
  </select>
  <button ng-click="ctrl.addCompany()">
      Add company B and select it
  </button>
</div>

Upvotes: 4

Alon Eitan
Alon Eitan

Reputation: 12025

Ok, so what do we have here?

You're creating your options with the ngOptions directive like this: ng-options="company.key as company.value for company in CompanyList"

That mean that the array $scope.CompanyList must have objects with a key property that will be set to the option value attribute, and a value that will be the option display value (Or label, if you prefer to call it that way).

What you were doing wrong: You added an object with only one property named key and set its value with the value variable: $scope.CompanyList.push({ key: value });

How should you fix it: You need to append object(s) with a key and a value like so: $scope.CompanyList.push({ key: key, value: value });

Upvotes: 3

Mistalis
Mistalis

Reputation: 18309

The following line push an object, which has a property name "key" set to value:

$scope.CompanyList.push({ key: value });

The result will be:

{'key': $scope.company.name}

You may change it to:

$scope.CompanyList.push({key: key, value: value});

Which will result in:

{ 'key': $scope.company.id, 'value': $scope.company.name }

Upvotes: 1

Related Questions