我正在开发一个支持搜索过滤器的小项目。我有一个默认选择下拉菜单，用户可以从中选择产品名称、状态和日期。这些选项确定接下来要显示或替换的表单类型。
当用户选择产品名称时，另一个下拉菜单会显示 Equals 和 Not Equals 等选项以及输入字段。
如果用户选择日期，则会显示另一个选择下拉菜单，其中包含小于、大于和介于等选项。对于大于和小于选项，会显示一个日期选择器。如果用户选择Between，则显示两个日期选择器，一个用于开始日期，另一个用于结束日期。
到目前为止，我已经通过使用例如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. 这个视图非常臃肿，带有显示特定表单的逻辑。例如，单个日期选择器与两天选择器。
<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>
这还支持添加/删除表单元素或删除所有添加的表单元素，如附图所示。任何提示/建议将不胜感激。我的用户界面视图
