For my array of locations, I am attempting to style location two in a unique way - with a deleted look featuring a red background and white text that is crossed out. When this option is selected by the user, I want the closed dropdown to display the same red crossed out label.
This is the desired appearance when the dropdown is closed:
However, I have encountered two issues with my code. First, the text-decoration: line-through styling is not being applied to the option that should look deleted, despite the red background and white text being styled correctly by the .isDeleted CSS class.
Secondly, when the deleted option is selected, the closed dropdown does not reflect any of the option styling. Instead of appearing with a red background and white crossed out text as intended, the text is black with a white background.
The image below shows the dropdown open, with the cursor hovering over the first option highlighted in blue, while the deleted option is displayed in red without the necessary crossing out effect. I'm unsure why this is happening even though the class is being applied.
I also attempted adding the class styling to the select element instead of the option element, but this resulted in all options being changed once the deleted style was applied.
$scope.locations = [
{"label":"123 Main St","locno":1,"deleted":false},
{"label":"456 Main St","locno":2,"deleted":true},
{"label":"789 Main St","locno":3,"deleted":false}
];
$scope.oItem = {"itemName":"Strawberry","locno":2};
.isDeleted{
background-color:red;
color:white;
text-decoration: line-through !important;
}
.isNotDeleted{
background-color:white;
color:black;
text-decoration: none;
}
<select ng-model="oItem.locno">
<option disabled value="">select location</option>
<option ng-repeat="opt in locations"
ng-value="{{opt.locno}}" value="{{opt.locno}}"
ng-class="{'isDeleted':opt.deleted, 'isNotDeleted':!opt.deleted}">{{opt.label}} -- {{opt.deleted}}</option>
</select>