Angularjsで動的に選択オプションを追加

Question

私は選択リストを持っています。 ViewBagを使用してリストに値を設定していますが、ほとんどの場合、選択したリストに動的項目を追加する必要があります。

これらのアイテムを追加できますが、それらの値がフェッチされている間は、新しく追加されたアイテムにはnullが返されます。 'ViewBag'を使用して他のアイテムの値を取得する問題はありません。

HTML：

<select ng-model="JobNo" id="JobNo" name="JobNo" class="myClass" style="width:100%;"> 
      <option ng-repeat="item in JobList.Data" value="{{item.ProjectCode}}">{{item.ProjectDescription}}</option> 
</select> 
<input type="button" value="Save Data" ng-click="SaveData()"> 

コントローラー：

$scope.JobList = @Html.Raw(Json.Encode(ViewBag.ProjectCode)) 
//Added new item here 
$compile(angular.element($("#JobNo option")).eq(0).after($compile('<option value="ALL"> -- ALL -- </option>')($scope))); 

$scope.SaveData=function() { 
       alert($scope.JobNo); // it's show 'null' when I select "--ALL--" but no problem in other cases 
       } 

Answer 1

これを試してみてください：コントローラで

<select ng-options="listname for refvar in displayname track by value" ng-model="selected value's variable"></select> 

Answer 2

の代わりに、最初のインデックスでJoblist.Data配列に新しい項目を追加行うM注射。

$scope.JobList = @Html.Raw(Json.Encode(ViewBag.ProjectCode)) 
//Added new item here 
$scope.JobList.Data.unshift({ 
    ProjectCode: 'ALL', 
    ProjectDescription: ' -- ALL -- ' 
}) 

または

あなたがHTMLでオプションを追加しようとすると、コントローラからオプション注射を削除することができ、ここで

HTML

<select ng-model="JobNo" id="JobNo" name="JobNo" class="myClass" style="width:100%;"> 
    <option value="ALL"> -- ALL -- </option> 
    <option ng-repeat="item in JobList.Data" value="{{item.ProjectCode}}">{{item.ProjectDescription}}</option> 
</select> 
<input type="button" value="Save Data" ng-click="SaveData()"> 

コントローラ

、コードです

$scope.JobList = @Html.Raw(Json.Encode(ViewBag.ProjectCode)) 

$scope.SaveData=function() { 
    alert($scope.JobNo); 
}