使用ng-changeselectng对象

给定以下select元素

<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.namesize.code

size.code会影响应用程序的其他部分(图片url等),但是当item.size.code的ng模型更新时, item.size.name需要更新,以便面向用户东东。 我假设正确的方法是捕获更改事件,并设置我的控制器内的值,但我不知道我可以通过更新来获得正确的值。

如果这是完全错误的方式去做,我很想知道正确的方法。

将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将被设置为当前select的项目。

无论代码需要item.size.code ,都可以通过$scope.item.code获取该属性。

小提琴 。

根据评论中的更多信息更新

然后使用其他$ scope属性来selectng模型:

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

的script.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的回答不起作用(将当前项目作为parameter passing),请参阅此Plunker中的onChanged()函数。 它使用this

http://plnkr.co/edit/B5TDQJ

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

这可能会给你一些想法

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

angular度控制器:

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

AngularJS的filter为我工作。

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

现在有三个重要方面

  1. ng-init="search.code = item.size.code" – 在select框外初始化h1元素时,将filter查询设置为选定的选项

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" – 当您更改selectinput时,我们将再运行一行,将“search”查询设置为当前选定的item.size.code

  3. filter:search:true – 通过过滤来启用严格匹配

而已。 如果size.codeuniqueID ,那么我们只有一个h1元素和size.name文本。

我已经testing了这个在我的项目,它的工作原理。

祝你好运

您需要使用“追踪”,以便可以正确比较对象。 否则Angular会使用本地js比较对象的方式。

所以你的示例代码将改变为 –

  <select ng-options="size.code as size.name for size in sizes track by size.code" ng-model="item.size.code"></select>