获取选定的选项值角度js模型

Posted 2023-03-16

【中文标题】获取选定的选项值角度js模型

【英文标题】：Get selected option value angular js model

【发布时间】：2017-11-28 16:23:56

【问题描述】：

我无法将选定的值返回给模型，但能够将模型值绑定为选择控件中的选定项。

查看：

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

【问题讨论】：

可以显示生成的html吗？

添加了输出html

【参考方案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>

【讨论】：

这里的 CostType 模型是什么？

只是model 名称。您可以根据适合的型号名称进行更改。