给定以下选择元素
<select ng-options="size.code as size.name for size in sizes "
ng-model="item.size.code"
ng-change="update(MAGIC_THING)">
</select>
有没有办法让 MAGIC_THING 等于当前选择的大小，所以我可以访问size.name和size.code在我的控制器中？
size.code 会影响应用程序的许多其他部分（图像 url 等），但是当item.size.code更新 ng-model 时，也item.size.name需要针对面向用户的内容进行更新。我认为执行此操作的正确方法是捕获更改事件并在我的控制器内部设置值，但我不确定我可以将什么传递给 update 以获得正确的值。
如果这完全是错误的方法，我很想知道正确的方法。
与其将 ng-model 设置为 item.size.code，不如将其设置为 size：
<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>
然后在您的update()方法中，$scope.item将设置为当前选择的项目。
无论需要什么代码item.size.code，都可以通过$scope.item.code.
小提琴。
根据评论中的更多信息进行更新：
然后为您选择的 ng-model 使用其他一些 $scope 属性：
<select ng-options="size as size.name for size in sizes"
ng-model="selectedItem" ng-change="update()"></select>
控制器：
$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
您也可以使用以下代码直接获取选定的值
<select ng-options='t.name for t in templates'
ng-change='selectedTemplate(t.url)'></select>
脚本.js
$scope.selectedTemplate = function(pTemplate) {
//Your logic
alert('Template Url is : '+pTemplate);
}
你也可以试试这个：
<select ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items"
ng-selected="selectedItem == item.Id" value="{{item.Id}}">
{{item.Name}}
</option>
</select>
如果 Divyesh Rupawala 的回答不起作用（将当前项作为参数传递），那么请查看onChanged()此 Plunker 中的函数。它正在使用this：
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option>
</select>
//Javascript
$scope.update = function () {
$scope.myItem;
alert('Hello');
}<!--HTML-->
<div class="form-group">
<select name="name"
id="id"
ng-model="myItem"
ng-options="size as size.name for size in sizes"
class="form-control"
ng-change="update()"
multiple
required>
</select>
</div>如果要写，name，id，class，multiple，required，可以这样写。
这可能会给你一些想法
.NET C# 视图模型
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
.NET C# Web API 控制器
public class DepartmentController : BaseApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var sms = Ctx.Departments;
var vms = new List<DepartmentViewModel>();
foreach (var sm in sms)
{
var vm = new DepartmentViewModel()
{
Id = sm.Id,
Name = sm.DepartmentName
};
vms.Add(vm);
}
return Request.CreateResponse(HttpStatusCode.OK, vms);
}
}
角度控制器：
$http.get('/api/department').then(
function (response) {
$scope.departments = response.data;
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);
$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
function (response) {
$scope.request = response.data;
$scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);
角模板：
<div class="form-group">
<label>Department</label>
<div class="left-inner-addon">
<i class="glyphicon glyphicon-hand-up"></i>
<select ng-model="travelerDepartment"
ng-options="department.Name for department in departments track by department.Id"
ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
这是从角度选择选项列表（Id 或 Text 除外）中获取值的最简洁方法。假设您的页面上有这样的产品选择：
<select ng-model="data.ProductId"
ng-options="product.Id as product.Name for product in productsList"
ng-change="onSelectChange()">
</select>
然后在您的控制器中设置回调函数，如下所示：
$scope.onSelectChange = function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}
简单解释：由于 ng-change 事件无法识别 select 中的选项项，因此我们使用 ngModel 从控制器中加载的选项列表中过滤掉选定的 Item。
此外，由于事件在 ngModel 真正更新之前被触发，您可能会得到不希望的结果，因此更好的方法是添加 timeout ：
$scope.onSelectChange = function () {
$timeout(function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}, 100);
};
您需要使用“track by”，以便正确比较对象。否则 Angular 将使用原生 js 方式来比较对象。
因此，您的示例代码将更改为 -
<select ng-options="size.code as size.name
for size in sizes track by size.code"
ng-model="item.size.code"></select>
AngularJS 的过滤器为我解决了。
假设code/id是唯一的，我们可以用 AngularJS 过滤掉那个特定的对象，filter并使用选定的对象属性。考虑上面的例子：
<select ng-options="size.code as size.name for size in sizes"
ng-model="item.size.code"
ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>
<!-- OUTSIDE THE SELECT BOX -->
<h1 ng-repeat="size in sizes | filter:search:true"
ng-init="search.code = item.size.code">
{{size.name}}
</h1>
现在，这有3 个重要方面：
ng-init="search.code = item.size.code"- 在框外初始化h1元素select时，将过滤器查询设置为所选选项。
ng-change="update(MAGIC_THING); search.code = item.size.code"- 当您更改选择输入时，我们将再运行一行，将“搜索”查询设置为当前选择的item.size.code.
filter:search:true- 传递true给过滤器以启用严格匹配。
而已。如果size.code是uniqueID，我们将只有一个h1文本为 的元素size.name。
我已经在我的项目中对此进行了测试，并且可以正常工作。
祝你好运