CODEWITHSUNDEEP
javascriptangularjs
Anthony O'Neill
Anthony O'Neill

Reputation: 107

ngModel overriding ngSelected on select>option element

I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.

        <select ng-model='signup.user["country_code"]'>
        <option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
            {{country["name"]}}
        </option>
        </select>

So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.

        <select>
        <option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
            {{country["name"]}}
        </option>
        </select>

Here is a snippet from my controller however I doubt it's that useful for solving this issue.

   signup.user = {};

   countryCodes.success(function(data) { 
     signup.country = data;
   });

Upvotes: 2

Views: 875

Answers (1)

dfsq
dfsq

Reputation: 193311

So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:

signup.user = {country_code: 840};

HTML:

<select ng-model="signup.user.country_code" 
        ng-options="country['country-code'] as country.name for country in signup.country">
</select>

Upvotes: 1

Related Questions