给定下面的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以获得正确的值。

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


当前回答

您需要使用“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>

如果Divyesh Rupawala的答案不起作用(将当前项作为参数传递),那么请参阅这个Plunker中的onChanged()函数。它使用这个:

http://plnkr.co/edit/B5TDQJ

这可能会给你一些启发

.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-model="selectedItem" ng-change="update()">
   <option ng-repeat="item in items" 
         ng-selected="selectedItem == item.Id" value="{{item.Id}}">
      {{item.Name}}
   </option>
</select>

您需要使用“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>