使用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.name和size.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 ：
<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>
现在有三个重要方面 ：
-
ng-init="search.code = item.size.code"– 在select框外初始化h1元素时，将filter查询设置为选定的选项 。 -
ng-change="update(MAGIC_THING); search.code = item.size.code"– 当您更改selectinput时，我们将再运行一行，将“search”查询设置为当前选定的item.size.code。 -
filter:search:true– 通过过滤来启用严格匹配 。
而已。 如果size.code是uniqueID ，那么我们只有一个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>
