Get ausgewählten Optionswert Winkel js Modell

Question

Ich bin nicht in der Lage, ausgewählter Wert zurück zum Modell, aber in der Lage, Modellwert als ausgewähltes Element im ausgewählten Steuerelement zu binden.

Ausblick:

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

Controller:

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

obigen Code verwenden, wählen Sie Steuerung ist in der Lage ausgewähltes Element zu setzen, basierend auf ID in BulkInvoice. Wenn der Benutzer die Option zum Speichern ändert, wird die geänderte Option nicht zurück an das Modell gesendet. Bitte helfen.

Output 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

paar Beobachtungen:

• Als Ihr select-Element ist kein Multi wählen, dann können Sie anstelle von Array von Objekten direkte Objekt verwenden, wie Sie wählen müssen jeweils nur ein Wert.

Lösung:

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>