如何在編輯模式下綁定下拉控件？

Question

我有一個國家名單及其相應的國家。

現在我想在編輯模式下打開時，在下拉控件中綁定國家和州的值。

這是小提琴手鍊接：

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我想用下拉列表中顯示我的國名和國家名如果用戶想要選擇，則允許用戶從下拉菜單中選擇其他國家和州。

我已經採取代碼從這個鏈接略有添加字段： http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/

Answer 1

這裏是你想要的，你可以使用NG選項爲國家&發達國家都選擇框什麼。

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，用於選擇負載選項一起使用的軌道作爲在這個 github issue

Answer 2

可以使用NG-重複

<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選項

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

在你控制器定義一組國家。

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