通过ng-change选择ng-object

Question

给出以下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会影响应用程序的许多其他部分(图像网址等),但是当item.size.code更新ng-model时,item.size.name需要更新面向用户的内容.我假设正确的方法是捕获更改事件并设置控制器内部的值,但我不确定我可以传递给更新以获取正确的值.

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

Answer 1

而不是将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将设置为当前选定的项目.

无论需要什么代码item.size.code,都可以获得该属性$scope.item.code.

小提琴.

根据评论中的更多信息进行更新:

为您的选择模型使用一些其他$ 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 ...
}

Answer 2

您还可以使用以下代码直接获取所选值

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

Answer 3

你也试试这个:

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

Answer 4

如果Divyesh Rupawala的答案不起作用(将当前项目作为参数传递),请参阅onChanged()此Plunker中的功能.它正在使用this:

http://plnkr.co/edit/B5TDQJ