通过ng-change选择ng-object

本文翻译自：getting the ng-object selected with ng-change

Given the following select element 给出以下select元素

<select ng-options="size.code as size.name for size in sizes " ng-model="item.size.code" ng-change="update(MAGIC_THING)"> </select>

Is there a way to get MAGIC_THING to be equal to the currently selected size, so I have access to size.name and size.code in my controller? 有没有办法让MAGIC_THING等于当前选择的大小，所以我可以访问我的控制器中的size.name和size.code ？

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of item.size.code is updated, item.size.name needs to be updated as well for the user facing stuff. size.code影响很多应用程序的其他部分（图像的URL等），但是当的NG-模型item.size.code被更新， item.size.name需要被更新为面向用户东西。 I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values. 我假设正确的方法是捕获更改事件并在我的控制器中设置值，但我不确定我可以传递给更新以获取正确的值。

If this is completely the wrong way to go about it, I'd love to know the right way. 如果这完全是错误的方式，我很想知道正确的方法。

---

#1楼

参考：https://stackoom.com/question/yMbS/通过ng-change选择ng-object

---

#2楼

Instead of setting the ng-model to item.size.code, how about setting it to size: 而不是将ng-model设置为item.size.code，如何将其设置为size：

<select ng-options="size as size.name for size in sizes" ng-model="item" ng-change="update()"></select>

Then in your update() method, $scope.item will be set to the currently selected item. 然后在update()方法中， $scope.item将设置为当前选定的项目。

And whatever code needed item.size.code , can get that property via $scope.item.code . 无论代码需要item.size.code ，都可以通过$scope.item.code获取该属性。

Fiddle . 小提琴 。

Update based on more info in comments: 根据评论中的更多信息进行更新 ：

Use some other $scope property for your select ng-model then: 为您的选择模型使用一些其他$ scope属性，然后：

<select ng-options="size as size.name for size in sizes" ng-model="selectedItem" ng-change="update()"></select>

Controller: 控制器：

$scope.update = function() { $scope.item.size.code = $scope.selectedItem.code // use $scope.selectedItem.code and $scope.selectedItem.name here // for other stuff ... }

---

#3楼

You can also directly get selected value using following code 您还可以使用以下代码直接获取所选值

<select ng-options='t.name for t in templates' ng-change='selectedTemplate(t.url)'></select>

script.js 的script.js

$scope.selectedTemplate = function(pTemplate) { //Your logic alert('Template Url is : '+pTemplate); }

---

#4楼

<select ng-model="item.size.code"> <option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option> </select>

---

#5楼

If Divyesh Rupawala's answer doesn't work (passing the current item as the parameter), then please see the onChanged() function in this Plunker. 如果Divyesh Rupawala的答案不起作用（将当前项目作为参数传递），那么请参阅此Plunker中的onChanged()函数。 It's using this : 它正在使用this ：

http://plnkr.co/edit/B5TDQJ http://plnkr.co/edit/B5TDQJ

---

#6楼

This might give you some ideas 这可能会给你一些想法

.NET C# View Model .NET C＃View Model

public class DepartmentViewModel { public int Id { get; set; } public string Name { get; set; } }

.NET C# Web Api Controller .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); } }

Angular Controller: 角度控制器：

$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."); } );

Angular Template: 角度模板：

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