将过滤器选项传递给angularjs指令

时间:2013-11-04 16:37:46

标签: angularjs

我正在尝试创建一个可以占用大多数json对象的指令,并且可以根据用户是否在移动设备或桌面上以及我的html标记上的属性生成选择选项或创建ul li下拉列表。

plunker:

http://plnkr.co/edit/2GFVhx0DgEsa0dfv9l5C

在我的索引页面中,我有一个div,我添加了属性,让设计人员可以灵活地指定数据(json对象使用), opt-value (要从对象中使用的值),选择说明(要在选择或文章中显示的文字)和选择过滤器(我想要的是什么)在这种情况下,传递给指令以处理opt-description中日期或其他过滤器的格式化,我知道它是一个日期。)

索引页:

<div generic-dropdown click-callback="callbackdateselectionchanged(value)" data="invoiceItems" opt-value="invoiceNumber" opt-description="invoiceDate"  opt-filter=" |date:'MM/dd/yyyy'" selected-item="selectedChoice"></div>

在我的控制器中,我有一个对象$ scope.invoiceItems,它是一张发票清单。

控制器:

$scope.invoiceItems = [{"invoiceNumber":"3067095","displayInvoiceNumber":"260996530","invoiceDate":"2013-08-01T05:00:00.0000000","invoiceAmount":0,"balanceDue":0,"dueDate":"2013-08-31T05:00:00.0000000","hasSubAccount":false},{"invoiceNumber":"3086446","displayInvoiceNumber":"260374907","invoiceDate":"2013-07-01T05:00:00.0000000","invoiceAmount":0,"balanceDue":0,"dueDate":"2013-07-31T05:00:00.0000000","hasSubAccount":false},{"invoiceNumber":"3053215","displayInvoiceNumber":"255453017","invoiceDate":"2012-12-01T06:00:00.0000000","invoiceAmount":0,"balanceDue":0,"dueDate":"2012-12-31T06:00:00.0000000","hasSubAccount":false}];

指令:

app.directive('genericDropdown', function() {
return {
    restrict: 'A',
    scope: {
        data: '=',
        clickCallback: '&',
        selectedItem: '=',
    },
    templateUrl: 'genericdropdown.html',
    link: function (scope, element, attrs) {
        scope.optValue = attrs.optValue;
        scope.optDescription = attrs.optDescription;
        scope.optFilter = attrs.optFilter;
    }
};

});

指令使用的模板,如果我将过滤器放在ng-options上,它就可以使用。

<select ng-model="ngModel" ng-options="a[optValue] as a[optDescription] | date:'MM/dd/yyyy' for a in data "  ng-change="clickCallback({value: ngModel})">
  <option selected>Select an Item</option>
</select>

我想看到的是,如果我可以将过滤器作为参数传递并像这样使用它,但是尝试几次它将返回空项。我想问题是,有没有办法将字符串传递给ng-options,可以用来过滤select中的数据?

ng-options="a[optValue] as a[optDescription] optFilter for a in data"

0 个答案:

没有答案