名前を編集するとき、AngularJSのドロップダウンメニューに同じ名前の項目を表示します

Question

データベースに接続されている簡単なAngularJSフォームがあります。

HTMLテーブル上の誕生の名前と国のフォームが表示リスト：

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

テーブルには、次のJS /アンギュラコードを使用

：

$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"); 
    }); 

そしてJS /角度を呼んでいますデータベースからのデータをリストするMVCのメソッド。

それが正常に動作していると私の問題は何か他のものに依存しているので、私はMVCのコードを含めたくない

：HTMLテーブルを見ては、私がすることができます各行と鉛筆のアイコンがある場合は

国の代わりにドロップダウンメニューを表示します。

私がやっていることは、データベースの国のリストをドロップダウンメニューに入力することです。ドロップダウンメニューには、選択した行/名前と同じ国が表示されます。

私は多くを検索しましたが、この問題の解決方法を見つけることができませんでした。私はAngularとJSにはとても新しいので、これについて助言してくれることを願っています。

Answer 1

Namesの配列内のselectのng-modelを属性に変更する必要があります。 ex。名前に国がある場合は、ng-modelの代わりにselectedCountryForEditとなります。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> 

また、ng-repeatをng-repeatに変更すると、パフォーマンスが向上します。

例：

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