When edit name, display the same name item on a dropdown menu in AngularJS

Question

I have a simple AngularJS form that is connected to the database.

The form displays list of names and country of birth on an HTML table:

<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
    <tr ng-repeat="name in Names">
        <td>{{name.FullName}}</td>
        <td>                               
            <select ng-model="selectedCountryForEdit" ng-show="editMode">
                <option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
            </select>
            <span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
        </td>                            
        <td><a href="" ng-click="editMode = !editMode"><i class="fa fa-pencil" aria-hidden="true"></i></a></td>
    </tr>                    
</table>

The table use the following JS/Angular code:

$http.get('/Home/GetNames')
    .then(function (response) {
        $scope.Names = response.data;
    })
    .catch(function (e) {
        console.log("error", e);
        throw e;
    })
    .finally(function () {
        console.log("This finally block");
    });

And the JS/Angular is calling a method on MVC to list data from the database.

I don't want to include the MVC code because it is working fine and my issue relies on something else:

If look at the html table, there is a pencil icon with each row that allows me to display a dropdown menu instead of the country.

What I am doing is filling the drop-down menu with list of countries from the database and I want the dropdown menu display the same country of the selected row/name.

I searched a lot and I could not find how to solve this issue. I am very new to Angular and JS and I hope you can advise on this.

Jesus Carrasco · Accepted Answer · 2017-08-17 17:48:06Z

1

You need to change ng-model of the select to the attribute in the Names array. ex. if Names has att country so the ng-model instead selectedCountryForEdit, will be the same of the Names.

<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
    <tr ng-repeat="name in Names">
        <td>{{name.FullName}}</td>
        <td>                               
            <select ng-model="name.country" ng-show="editMode">
                <option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
            </select>
            <span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
        </td>                            
        <td><a href="" ng-click="editMode = !editMode"><i class="fa fa-pencil" aria-hidden="true"></i></a></td>
    </tr>                    
</table>

also will recoment to change te select options ng-repeat to ng-options cause this one has better performance.

example:

<select ng-model="name.country" ng-show="editMode" ng-options="z.countryCode as z.CountryName for z in countryList">
    <option value="">Select...</option>
 </select>

edited Aug 17, 2017 at 17:48

answered Aug 17, 2017 at 17:44

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

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

1 Comment

Ahmed Ali Over a year ago

Thank you! I will try this out and I will get back to you

Collectives™ on Stack Overflow

When edit name, display the same name item on a dropdown menu in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related