Question

我看到了一个自定义选择控制指令的jsfiddle示例： [http://jsfiddle.net/marco_m_alves/rjbMj/]

    myApp.directive('nameValueSelect', function() {
    return {
    restrict: "E",
    scope: {
        entry: "=",
        field: "@",
        options: "=",
        onInputChange: "&"
    },
    controller: function($scope) {

        $scope.onChange = function() {
            console.log("selected changed");
            $scope.entry.type = $scope.option.value;
            $scope.onInputChange();
        };

        var getItemForValue = function(value) {
            var item = null;
            $scope.options.forEach(function(_option) {
                if (_option.value == value) {
                    item = _option;
                }
            });
            return item;
        };

        $scope.$watch("entry", function() {
            console.log("entry changed");
            $scope.option = getItemForValue($scope.entry[$scope.field]);
        }, true);

    },
    template: '<select ng-model="option" ng-options="o.name for o in options" ng-change="onChange()">'

};});

各自的HTML：

  <name-value-select entry="entry" field="type" options="types" on-input-change="onInputChange()"></name-value-select>

我的问题是：

如果我有一个或多个过滤器怎么办？如何将它们用于此指令？我尝试了各种方法来修改指令中的ng-options以包含过滤器，但都无济于事。有什么想法吗？

以下是我要实施的两个过滤器：

| filterByType：'Front'| orderBy：'name'“

当然，我不希望他们硬编码到指令中。

澄清：

我不打算按名称过滤选择值本身，而是我希望只有当他们的“filterByType”属性值为“Front”然后（2）过滤时才显示选择值（1）按字母顺序排列。

Answer 1

将过滤器添加到options属性（在HTML中）中的表达式：

http://plnkr.co/edit/o51eqq6XjIfAjvdtrz96?p=preview

AngularJS - 自定义指令：选择控制 - 过滤器

1 个答案: