给定下面的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。控制器中的代码?
大小。代码会影响应用程序的许多其他部分(图像url等)，但当item.size.code的ng-model更新时，item.size.name也需要更新面向用户的东西。我假设做到这一点的正确方法是捕获更改事件并在控制器中设置值，但我不确定我可以将什么传递到update以获得正确的值。
如果这是完全错误的方法，我很想知道正确的方法。
当前回答
这可能会给你一些启发
.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>
其他回答
这可能会给你一些启发
.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>
您也可以使用以下代码直接获取所选值
<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);
}
而不是将ng-model设置为item.size。代码，如何设置它的大小:
<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>
然后在你的update()方法中，$scope。项将被设置为当前选定的项。
以及任何需要item。size的代码。Code，可以通过$scope.item.code获得该属性。
小提琴。
根据评论中的更多信息更新:
为你的select 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 ...
}
您需要使用“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>
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option>
</select>
