AngularJSとWeb APIとの一対多の関係からドロップダウンを作成

Question

私のデータベースには2つのテーブルがあります：PeopleとPayband。だから私は、ASP.NET Webを作成しました

dbo.People

PersonId : int (PK) 
FirstName : string 
MiddleInitial: string 
LastName : string 
DateOfBirth: datetime 
PaybandId : int (FK) 

dbo.Paybands

Id : int (PK) 
Name : string 

：私は、下記の関係の縮小版をあげますバックエンドのAPIサービス、フロントエンドにHTML/CSSとAngularJSを使用しています。私は引っ張って表示し、データを編集することができます問題はありません。ここに私のフォームはどのようなものかのイメージがあります：

私は人に割り当てられている現在のPayband値を取得することができるよ、唯一の問題は、私は他のすべてのPaybandを取得することができませんよということです値を入力してHTMLドロップダウンに表示すると、任意の人物の支払いバンドを簡単に変更できます。私がやろうとしていることを達成する方法が失われているので、誰かがこれを手伝うことができれば、本当に感謝しています。事前にありがとうございます。他にご質問がありましたら、遠慮なくご相談ください。

はまた、ここに私のAngularJSコントローラは（はい、私は現在、テストのために人のIDをハードコーディングしています）です：

angular 
.module("personnelService") 
.controller("PersonnelEditCtrl", 
      PersonnelEditCtrl); 

function PersonnelEditCtrl(personnelResource) { 
var vm = this; 
vm.person = {}; 
vm.message = ''; 

personnelResource.get({ id: 2 }, 
    function (data) { 
     vm.person = data; 
     vm.person.dob = new Date(vm.person.dob); 
     vm.originalPerson = angular.copy(data); 
    }); 

if (vm.person && vm.person.personId) { 
    vm.title = "Edit: " + vm.person.firstName + " " + vm.person.lastName; 
} 
else { 
    vm.title = "New Person"; 
} 

vm.submit = function() { 
    vm.message = ''; 
    if (vm.person.personId) { 
     vm.person.$update({ id: vm.person.personId }, 
      function (data) { 
       vm.message = '... Save Complete'; 
      }) 
    } 
    else { 
     vm.person.$save(
      function (data) { 
       vm.originalPerson = angular.copy(data); 
       vm.message = '... Save Complete'; 
      }) 
    } 
}; 

vm.cancel = function (editForm) { 
    editForm.$setPristine(); 
    vm.person = angular.copy(vm.originalPerson); 
    vm.message = ""; 
}; 

}

Answer 1

あなたがpaybandsのリストを公開するサーバー上のエンドポイントを持っている必要があります述べたように、つまり、あなたは、データベースからPaybandsのリストを返すGETアクションの結果が必要になりますコントローラでPaybandsControllerという名前のコントローラ。 paybandResourceはこれに貼り付けられ、クエリ機能を使用して公開する必要があります。 Yaserが指摘するように、そのvm.paybandsをUIに接続します。ビューで

function PersonnelEditCtrl(personnelResource, paybandResource, $filter) { 
    var vm = this; 
    vm.person = {}; 
    vm.message = ''; 
    vm.paybands = []; 

    paybandResource.query(function(data) { 
     vm.paybands = $filter('orderBy')(data, 'Name'); 
    }); 

//....... 

<select 
    ng-model="person.paybandId"     
    ng-options="payband.name for payband in paybands track by payband.id"> 
</select> 

Answer 2

あなたはすべてのpaybandを取得する方法を持っている必要がありますし、その中にそれらを設定します。

<select 
    ng-model="person.paybandId"     
    ng-options="payband.name for payband in paybands"> 
</select>