CODEWITHSUNDEEP
javascriptangularjs
Bombel
Bombel

Reputation: 159

Default value of select element angularJS

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!

Upvotes: 0

Views: 64

Answers (2)

cyrus zhou
cyrus zhou

Reputation: 121

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>

Upvotes: 1

Roman Hutnyk
Roman Hutnyk

Reputation: 1549

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"

Upvotes: 1

Related Questions