検索フィルターをサポートする小さなプロジェクトに取り組んでいます。製品名、ステータス、日付など、ユーザーが選択できるデフォルトの選択ドロップダウンがあります。これらのオプションは、次に表示または置換するフォームのタイプを決定します。
ユーザーが製品名を選択すると、別のドロップダウンが表示され、Equals や Not Equals などのオプションと入力フィールドが表示されます。
ユーザーが [日付] を選択すると、別の選択ドロップダウンが表示され、[より小さい]、[より大きい]、[次の間] などのオプションが表示されます。より大きいオプションとより小さいオプションの場合、日付ピッカーが表示されます。ユーザーが [Between] を選択すると、開始日用と終了日用の 2 つの日付ピッカーが表示されます。
ng-ifこれまでのところ、例やなどのロジックでビューを肥大化させることで、この問題を解決しました||。
別の方法が必要であることはわかっていAngular wayます。
ここに私が現在持っているコードがあります。productsFormFilterBuilderCtrlフォームを動的に構築するコントローラーがあります。
app.controller('productsFormFilterBuilderCtrl', function($scope){
// Default form
$scope.default_form = {
options: [
{ id: "name", name: "Product Name" },
{ id: "description", name: "Product Description" },
{ id: "status", name: "Status" },
{ id: "end_date", name: "End Date" }
],
selected_option: {id: "name", name: "Product Name"}//Sets the default value of the select in the ui
};
//Add form when product Name is selected
$scope.product_name = {
operators: [
{ id: "equals", name: "Equals" },
{ id: "not_equals", name: "Does Not Equal" },
{ id: "contains", name: "Contains" },
{ id: "not_contains", name: "Does Not Contain" }
],
selected_option: {id: "equals", name: "Equals"}//Sets the default value of the select in the ui
};
//Add for when product description is selected
$scope.product_description = {
operators: [
{ id: "equals", name: "Equals" },
{ id: "not_equals", name: "Does Not Equal" },
{ id: "contains", name: "Contains" },
{ id: "not_contains", name: "Does Not Contain" }
],
selected_option: {id: "equals", name: "Equals"}//Sets the default value of the select in the ui
};
//Add form when product Status is selected
$scope.status_options = {
operators: [
{ id: "equals", name: "Equals" },
{ id: "not_equals", name: "Does Not Equal" },
{ id: "contains", name: "Contains" },
{ id: "not_contains", name: "Does Not Contain" }
],
selected_option: {id: "equals", name: "Equals"}//Sets the default value of the select in the ui
};
//Add when End Date is selected
$scope.end_date_options = {
operators: [
{ id: "equals", name: "Equal" }, //Start Date
{ id: "not_equals", name: "Does Not Equal"},
{ id: "greater_than", name: "Is Greater Than"},
{ id: "greater_or_equal", name: "Is Greater Than Or Equal To"},
{ id: "less_than", name: "Is Less Than"}, //End Date
{ id: "less_or_equal", name: "Is Less Than Or Equal To"},
{ id: "between", name: "Is Between"} //Start + End Date
],
selected_option: { id: "equals", name: "Equal"}//Sets the default value of the select in the ui
};
});
次に、選択ドロップダウンが を使用して作成される HTML テンプレートがありますng-options。このビューは、特定のフォームを表示するためのロジックで非常に肥大化しています。たとえば、単一の日付ピッカーと 2 日間のピッカーです。
<form id="new-search-filter-{{searchFilterForm.counter}}" ng-controller="productsFormFilterBuilderCtrl">
<div class="row">
<!-- Filter products on Product Name, Product Description etc -->
<div class="col-md-4">
<div class="form-group">
<select class="form-control" name="filter_field" id="filter_field"
ng-options="option.name for option in default_form.options track by option.id"
ng-model="default_form.selected_option">
</select>
</div>
</div>
<!-- Display only for Product Name, Description and Status-->
<div ng-if="default_form.selected_option.name == 'Product Name' ||
default_form.selected_option.name == 'Product Description' ||
default_form.selected_option.name == 'Status'" >
<!-- Filter on Product Name -->
<div class="col-md-3" ng-if="default_form.selected_option.name == 'Product Name' ">
<div class="form-group">
<select class="form-control" name="product_name" id="product_name"
ng-options="option.name for option in product_name.operators track by option.id"
ng-model="product_name.selected_option">
</select>
</div>
</div>
<!-- Filter on Product Description -->
<div class="col-md-3" ng-if="default_form.selected_option.name == 'Product Description' ">
<div class="form-group">
<select class="form-control" name="product_description " id="product_description "
ng-options="option.name for option in product_description.operators track by option.id"
ng-model="product_description.selected_option">
</select>
</div>
</div>
<!-- Filter on Product Status-->
<div class="col-md-3" ng-if="default_form.selected_option.name == 'Status'">
<div class="form-group">
<select class="form-control" name="status_operators" id="status_operators"
ng-options="option.name for option in status_options.operators track by option.id"
ng-model="status_options.selected_option">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group" id="filter_input1">
<input type="text" class="form-control" id="input_value" placeholder="Enter Value" name="input" ng-model="input.text">
</div>
</div>
<!-- delete button-->
<div class="col-md-1 text-center">
<div class="form-group">
<a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
</div>
</div>
</div>
<!-- Filters when End Date is selected. Attach datePicker controller here -->
<div ng-if="default_form.selected_option.name == 'End Date'" ng-controller="datePickerCtrl">
<div class="col-md-3">
<div class="form-group">
<select class="form-control" name="date_operators" id="date_operators"
ng-options="option.name for option in end_date_options.operators track by option.id"
ng-model="end_date_options.selected_option"></select>
</div>
</div>
<!-- Filter when End Date is selected and Equal, Does Not Equal,
Is Greater Than/or Equal To is selected-->
<div ng-if="end_date_options.selected_option.name == 'Equal' ||
end_date_options.selected_option.name == 'Does Not Equal' ||
end_date_options.selected_option.name == 'Is Greater Than' ||
end_date_options.selected_option.name == 'Is Greater Than Or Equal To' ">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<!-- Display end date datepicker for 'Is Less Than' or 'Is Less Than or Equal To'-->
<div ng-if="end_date_options.selected_option.name == 'Is Less Than'
|| end_date_options.selected_option.name == 'Is Less Than Or Equal To'">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<!-- Displays two day pickers if 'End Date' && 'Is Between' is selected -->
<div ng-if="end_date_options.selected_option.name == 'Is Between'" ng-controller="datePickerCtrl">
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<!-- delete button-->
<div ng-if="end_date_options.selected_option.name == 'Equal' ||
end_date_options.selected_option.name == 'Does Not Equal' ||
end_date_options.selected_option.name == 'Is Greater Than' ||
end_date_options.selected_option.name == 'Is Greater Than Or Equal To' ||
end_date_options.selected_option.name == 'Is Less Than'
|| end_date_options.selected_option.name == 'Is Less Than Or Equal To'">
<div class="col-md-1 text-center">
<div class="form-group">
<a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
</div>
</div>
</div>
<div ng-if="end_date_options.selected_option.name == 'Is Between'">
<div class="col-md-1 text-center">
<div class="form-group">
<a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
これは、添付の画像に示すように、フォーム要素の追加/削除、または追加されたすべてのフォーム要素の削除もサポートします。ヒント/提案は大歓迎です。私のUIビュー
