1

ほとんどの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>

私が見たいのは、フィルターをパラメーターとして渡してこのように使用できるかどうかですが、数回試してみると空のアイテムが返されます。問題は、select でデータをフィルタリングするために使用できる文字列を ng-options に渡す方法はあるのでしょうか?

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

0 に答える 0