获取选定的选项值角度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

观察很少：

• 由于您的选择元素不是多选，因此您可以使用直接对象而不是对象数组，因为您一次只能选择单个值。

解决方案：

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

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

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