選択したオプション値の角度jsモデルを取得

Question

選択した値をモデルに戻すことはできませんが、モデル値を選択コントロールの選択項目としてバインドできます。

閲覧：

<div data-ng-repeat="BI in BulkInvoice"> 
    <select class="input-sm form-control input-s-sm inline" ng-disabled="!edit" data-ng-model="BI.DefaultCostType"> 
    <option value="">Select</option> 
    <option ng-selected="BI.DefaultCostType == item.ID" 
      ng-repeat="item in costTypes" 
      ng-value="item.ID"> 
     {{item.Name}} 
    </option> 
    </select> 
    </div> 

コントローラー：

$scope.BulkInvoice = [{ 
DefaultCostType : 4 
}]; 

コード上に使用して、選択コントロールはBulkInvoiceのidに基づいて選択された項目を設定することができます。しかし、ユーザーがオプションを変更したときに、変更が保存された場合、変更されたオプションはモデルに戻されません。手伝ってください。

出力HTML：

<select class="input-sm form-control input-s-sm inline" ng-disabled="!edit"> 
                <option value="">Select</option> 
                <!-- ngRepeat: item in costTypes --><option ng-selected="BI.DefaultCostType == item.ID" ng-repeat="item in costTypes" ng-value="item.ID" ng-model="BI.DefaultCostType" class="ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" value="1"> 
                 Claim Cost 
                </option><!-- end ngRepeat: item in costTypes --><option ng-selected="BI.DefaultCostType == item.ID" ng-repeat="item in costTypes" ng-value="item.ID" ng-model="BI.DefaultCostType" class="ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" value="3"> 
                 Expense - A&amp;O 
                </option><!-- end ngRepeat: item in costTypes --><option ng-selected="BI.DefaultCostType == item.ID" ng-repeat="item in costTypes" ng-value="item.ID" ng-model="BI.DefaultCostType" class="ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" value="4"> 
                 Expense - D&amp;CC 
                </option><!-- end ngRepeat: item in costTypes --><option ng-selected="BI.DefaultCostType == item.ID" ng-repeat="item in costTypes" ng-value="item.ID" ng-model="BI.DefaultCostType" class="ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" value="2" selected="selected"> 
                 Unspecified Cost Type 
                </option><!-- end ngRepeat: item in costTypes --> 
               </select> 

Answer 1

少数の観測：

• あなたのselect要素ではないので、マルチあなたが選択する必要がありますよう、あなたの代わりにオブジェクトの配列の直接のオブジェクトを使用することができます選択一度に1つの値のみを返します。

ソリューション：

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.BulkInvoice = { 
 
\t \t \t \t DefaultCostType : 2 
 
\t \t }; 
 
    
 
    $scope.costTypes = [{ 
 
\t \t \t \t "ID" : 1, 
 
     "Name": "name1" 
 
\t \t }, 
 
    { 
 
\t \t \t \t "ID" : 2, 
 
     "Name": "name2" 
 
\t \t }, 
 
    { 
 
\t \t \t \t "ID" : 3, 
 
     "Name": "name3" 
 
\t \t }, 
 
    { 
 
\t \t \t \t "ID" : 4, 
 
     "Name": "name4" 
 
\t \t }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select data-ng-model="CostType"> 
 
    <option value="">Select</option> 
 
    <option ng-repeat="item in costTypes" ng-selected="BulkInvoice.DefaultCostType == item.ID" ng-value="item.ID"> 
 
     {{item.Name}} 
 
    </option> 
 
    </select> 
 
</div>