I am working on a function to show or hide a field based on the selected drop-down option. Additionally, if the field is active, I want to ensure it is not displayed in the Add filter dropdown list. You can view the plunker I created here.
So far, when I click on the remove field button (x), the field is hidden successfully. However, if I add the same field from the add filter option and then try to remove it again, it does not work as expected. I believe there may be a more effective way to achieve this functionality. Could someone please lend a hand?
Controller
angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
$scope.title = "hello";
$scope.isName = true;
$scope.isDropdown = true;
$scope.hideName = function() {
$scope.isName = false;
$scope.removeFilterOption($scope.isName);
};
$scope.hideDropdown = function() {
$scope.isDropdown = false;
};
$scope.removeFilterOption = function(value) {
if (value != $scope.isName) {
$scope.add_options.splice(1, 1);
} else {
$scope.add_options.splice(1, 0, {
text: "Name",
value: "name"
});
}
};
$scope.add_options = [];
$scope.add_filter = $scope.add_options[0];
$scope.selected = function(value) {
if (value === "name") {
$scope.isName = true;
} else if (value === "cars") {
$scope.isDropdown = true;
}
}
}]);
Template
<body ng-controller="Main">
{{title}}
<div ng-show="isName">
<label> Name
<span>
<button ng-click="hideName()">×</button>
</span>
</label>
<div>
<input/>
</div>
</div>
<div ng-show="isDropdown">
<label> Cars
<span>
<button ng-click="hideDropdown()">×</button>
</span>
</label>
<div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<div>
<h5>Add filter</h5>
<select
ng-model="add_filter" ng-selected="selected(add_filter.value)"
ng-options="x.text for x in add_options track by x.value">
</select>
</div>
</body>