Default value of select element angularJS

Question

I've seen other similar questions but none of the answers helped in my case.

My controller loads an object and an array of an objects and I assign it to two variables.

Array:

customers.getCustomers() //pobieram odpowiedniego klienta
                    .then(function successCallback(response){
                        $scope.klienci = response.data.data;

                        console.log('Klienci', $scope.klienci[0])
                    }, function errorCallback(response){
                        console.log('Nie załadowałem użytkownika:'+response.status);
                        console.log(response.statusText);
                });

and single object:

customers.getCustomer($scope.serwis.id) //pobieram odpowiedniego klienta
                    .then(function successCallback(response){
                        $scope.customer = response.data;
                        console.log('Klient', response.data)
                    }, function errorCallback(response){
                        console.log('Nie załadowałem użytkownika:'+response.status);
                        console.log(response.statusText);
                });

The first object in the array of an objects is exactly the same as the single object so:

$scope.klienci[0] === $scope.customer

to be specific:

$scope.klienci[0] == {__metadata: Object, id: 1, firstName: "Jan", lastName: "Kowalski", telephone: "123132132"}
$scope.customer == {__metadata: Object, id: 1, firstName: "Jan", lastName: "Kowalski", telephone: "123132132"}

My html fragment is here:

<select ng-model="customer.id" ng-options="klient.firstName for klient in klienci" class="form-control"></select>

Firebug code:

<select ng-model="customer.id" ng-options="klient.firstName for klient in klienci track by klient.id" class="form-control ng-pristine ng-valid ng-not-empty ng-touched">
<option value="?" selected="selected"></option>
<option label="Jan" value="17">Jan</option>
<option label="Thomas" value="18">Thomas</option>
<option label="Stanislaw" value="19">Stanislaw</option>
<option label="Katarzyna" value="20">Katarzyna</option>
</select>

The first selection option is blank but if I use ng-model="customer" it will work but I won't be able to pass all the fields data in single $scope.customer object when saving.

Thanks!

cyrus zhou · Accepted Answer · 2016-01-09 19:08:48Z

1

customer.id can't match with klient.firstName, if you want the select option has a default value,you can use <select ng-model="customer.id" ng-options="klient.id as klient.firstName for klient in klienci" class="form-control"></select>

answered Jan 9, 2016 at 19:08

cyrus zhou

1214 bronze badges

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

3 Comments

Bombel Over a year ago

Thank you @roman-hutnyk and @cyrus-zhou for pointing out the klient.firstName mistake. However, I still cannot get default value using ng-model="customer.id" I get following:

<select ng-model="customer.id" ng-options="klient.id as klient.firstName for klient in klienci track by klient.id" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty"><option value="?" selected="selected"></option><option label="Michal" value="1">Michal</option><option label="Jan" value="2">Jan</option><option label="Stanislaw" value="3">Stanislaw</option></select>

Only ng-model="customer" works

Bombel Over a year ago

It seems that track by was an issue in my last case. Correct version:

<select ng-model="customer.id" ng-options="klient.id as klient.firstName + ' ' + klient.lastName for klient in klienci" class="form-control"></select>

cyrus zhou Over a year ago

I think you browser auto add track by klient.id

Roman Hutnyk · Accepted Answer · 2016-01-09 17:54:39Z

1

You are taking first name for options, but binding to the object when specifying:

ng-model="customer"

You should either use object for options:

ng-options="klient for klient in klienci"

Or firstname for a model:

ng-model="customer.firstname"

answered Jan 9, 2016 at 17:54

Roman Hutnyk

1,5499 silver badges14 bronze badges

Collectives™ on Stack Overflow

Default value of select element angularJS

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related