如何在编辑模式下绑定下拉控件? [英] 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.
这是提琴手的链接:
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>
就像我已经使用文本框显示名字和姓氏一样,我想使用下拉菜单在下拉列表中显示我的国家名称和州名,并且如果用户愿意,还允许用户从下拉列表中选择其他国家和州选择.
我从此链接中获取了代码,并添加了一些字段: http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/
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/
推荐答案
这就是您想要的,您可以对状态&的两个选择框都使用ng-options国家.
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>
控制器
$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
注意
按照ID的建议使用ID跟踪来选择加载选项 github问题
Used track by id for selecting option on load as suggest in this github issue
这篇关于如何在编辑模式下绑定下拉控件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!