How to bind dropdown control in edit mode?

问题

I am having a list of country along with its corresponding states.

Now i want to bind the country and state value in dropdown control when open in edit mode.

This is the fiddler link:

http://jsfiddle.net/mariapithia/4yj8rprp/9/

     <tr data-ng-repeat="friend in friends">
                        <td><strong>{{ friend.Id }}</strong></td>
                        <td>
                        <p data-ng-hide="friend.editMode">{{ friend.firstname}}</p>
                        <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.firstname" />


                        </td>
                        <td>
                        <p data-ng-hide="friend.editMode">{{ friend.lastname}}</p>
                        <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.lastname" />

                        </td>

                      <td>
                      <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p>
                          @*How do i use select here for dropdown for binding country name in my dropdown*@
                @*<select data-ng-show="friend.editMode">
                    <option value="">-- Select Country --</option>
                 </select>  *@
                        </td>
                        <td>
                       <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p>
@*How do i use select here for dropdown for binding state name in my dropdown*@
                @*<select data-ng-show="friend.editMode">
                    <option value="">-- Select State--</option>
                 </select>  *@
                        </td>
                        <td>
                            <p ><a data-ng-click="toggleEdit(friend)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(friend)" href="javascript:;">Delete</a></p>
                        </td>
                    </tr>
                </table>

Like i have use textbox for displaying firstname and lastname.sameway i would like to use dropdown for displaying my country name and state name in dropdown and allow user to select other country and state too from dropdown if user wants to select.

I have taken code from this link with slight addition of fields: http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/

回答1:

Here is what you wanted you could use ng-options for both select box for states & countries.

HTML

<td>
    <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p>
    <select data-ng-show="friend.editMode" ng-model="friend.Country" ng-options="country.Name for country in countries track by country.Id "></select>
</td>
<td>
    <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p>
    <select data-ng-show="friend.editMode" ng-model="friend.State" ng-options="state.Name for state in states track by state.Id "></select>
</td>

Controller

$scope.countries = [{
    "Id": 1,
    "Name": "America",
}, {
    "Id": 2,
    "Name": "Australia",
}, {
    "Id": 3,
    "Name": "london",
}];

$scope.states = [{
    Id: 1,
    CountryId: 1,
    Name: "Chicago",
}, {
    Id: 2,
    CountryId: 2,
    Name: "sydney",
}, {
    Id: 3,
    CountryId: 3,
    Name: "abc",
}];

Working Fiddle

Note

Used track by id for selecting option on load as suggest in this github issue

回答2:

You can use ng-repeat

<select data-ng-show="friend.editMode" ng-model="friend.Country.Name">
    <option ng-repeat="country in countries" value="{{country}}" ng-selected="friend.Country.Name==country">{{country}}</option>
</select>

Or use ng-options

<select ng-model="friend.Country.Name" ng-options="country as country for country in countries"></select>

In your controller define an array of countries.

$scope.countries = ['America', 'Australia', 'london'];

来源：https://stackoverflow.com/questions/29137230/how-to-bind-dropdown-control-in-edit-mode

标签

angularjs

ng-options