javascript - AngularJS:带有过滤器和 ng-change 的 ng-options

Question

我有一个带有过滤器的选择器来格式化显示文本，我需要将所选值传递给 Controller ​​，但我想传递所选项目的“id”:

<select 
                ng-model="my_field" 
                ng-options="q.name as (q.name | filter1 | filter2) for q in my_fields track by q.id"
                ng-change="controllerMethod(my_field)"
                required>
                </select>

// Controller
    function controllerMethod(selected_field){
       console.log(selected_field);
    }
    $scope.controllerMethod = controllerMethod;


// Filters
    angular.module('app')
        .filter('filter1', function(){ 
            return function(str_value) {
                return str_value ? str_value.split('_').join(' ') : "";
            }
        })

        .filter('filter2', function(){ 
            return function(str_value) {
                return (!!str_value) ? str_value.charAt(0).toUpperCase() + str_value.substr(1).toLowerCase() : '';
            }
        })

在我添加此过滤器之前，它会将所有对象传递给 Controller ​​。现在，它正在传递“q.name”(标签)。如何传递所选对象的 ID？

谢谢!

Answer 1

我相信您需要将 ng-options 更改为以下内容:

ng-options="q as (q.name | filter1 | filter2) for q in my_fields track by q.id"

按照您设置的方式，track by 表达式的计算结果为 q.name.id，这将是未定义的。我在上面添加的代码应该评估为 q.id 我相信这就是您所追求的。检查this jsfiddle看看这是否是您想要的。