我正在尝试创建一个指令,该指令可以采用大多数 json 对象,并且可以根据用户是在移动设备还是台式机上以及我的 html 标记上的属性生成选择选项或创建 ul li 下拉列表。
笨蛋:
http://plnkr.co/edit/2GFVhx0DgEsa0dfv9l5C
在我的索引页面中,我有一个 div,我添加了属性,让设计人员可以灵活地指定哪些数据(要使用的 json 对象)、opt-value(要从对象中使用的值)、opt-description(文本在 select 或 ul li 中显示)和opt-filter(我想传递给指令以处理 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 可用于过滤选择中的数据?
ng-options="a[optValue] as a[optDescription] optFilter for a in data"