如何在编辑模式下绑定下拉控件？

Question

我有一个国家列表及其相应的州。

现在我想在编辑模式下打开时在下拉控件中绑定国家和州值。

这是提琴手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>

就像我使用文本框显示名字和 lastname.sameway 我想使用下拉列表在下拉列表中显示我的国家名称和州名称并允许用户 select 其他如果用户想要 select.

，也可以从下拉列表中选择国家和州

我从这个 link 中提取了代码，并稍微添加了一些字段： http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/

Answer 1

您可以使用 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>

或者使用 ng-options

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

在你的控制器中定义一组国家。

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

Answer 2

这是您想要的，您可以为州和国家/地区的 select 框使用 ng-options。

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>

控制器

$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

如何在编辑模式下绑定下拉控件？

How to bind dropdown control in edit mode?

angularjs

ng-options