Html 选择选项有条件地应用CSS

我正在尝试设置位置数组中位置2的样式，使其具有删除的外观、红色背景和被划掉的白色文本。如果用户选择此选项，则关闭下拉列表时所选的选项应显示相同的先前红色划线标签

这是我在关闭下拉列表时所需的选定外观

我的示例代码有两个问题，第一个是“看起来已删除”选项没有显示文本装饰：线条通过样式。。。虽然红色背景和白色文本由isDeleted CSS类应用

其次，当选择删除选项时，处于关闭状态的下拉列表不反映任何选项样式，文本为黑色，背景为白色，而我想要的是上面显示的红色背景，背景为白色略去的文本

下图显示了打开的下拉列表，其中我的光标位于第一个选项上，该选项以蓝色悬停，已删除的选项以红色显示。但是，即使应用了该类，删除选项也不会被划掉，为什么

还尝试将类样式添加到select元素而不是option元素，但一旦应用了删除的样式，所有选项都会发生更改

$scope.locations=[ {标签：123大街，位置号：1，删除：假}， {标签：456大街，位置号：2，删除：真}， {标签号：789 Main St，位置号：3，已删除：false} ]; $scope.oItem={itemName:草莓，locno:2}； .被删除{ 背景色：红色； 颜色：白色； 文字装饰：线条贯穿！重要； } 。未删除{ 背景色：白色； 颜色：黑色； 文字装饰：无； } 选择位置 {{opt.label}-{{opt.deleted}

---

关于第一个问题，我有一些坏消息要告诉你。由于元素本身的原因，为元素选择样式是一场噩梦

该元素被认为不可能跨平台保持一致的样式。然而，有些风格是可行的

资料来源：

CSS属性文本装饰可能是html元素选项样式中不支持的装饰之一。但是，您可以考虑在ANGLARJS中执行您自己的指令，它可以像选择/选项HTML一样使用，也可以使用自举。 对于第二个问题，我更改了您的代码，如下所示，它可以正常工作。 HTML:

普朗克：

我添加了ng类以确定应用基于哪个类。为了确定要应用的类，它在“select”元素的“ng change”中使用了一个函数

---

如果我误解了您的问题，或者您需要进一步解释，请告诉我。

奇怪，它为我打开了。。。？更新的Plunker，现在应该可以使用了我有几个问题，SelectedItem函数在哪里，AngularJs如何知道选择了哪个项，因为这两个对象oItem和opt或位置[n]之间唯一的共同点。opt是locno属性？谢谢你的帖子，到目前为止，它非常有用。我编辑了帖子，删除了“selectedItemopt”功能，因为它没有用。例如，在AngularJs中，当您在输入中写入内容时，您写入的值存储在与输入关联的“ng模型”中。对于select也是一样的，在我们的示例中，当您选择一个选项时，angularjs会将所选项目放入ng模型oItem。如何知道要放置的项目？在本例中，他在我们的示例中取了ng值opt中的对象，并将其放在select元素的ng模型中。。。。我遇到的问题是oItem和opt是不同的对象，尽管我的示例没有显示它，但当opt成为select元素的值时，还有更多的属性会被覆盖。在我最初的帖子中，我使用了两个对象locno之间的公共属性，因此当oItem接受用户选择选项的值时，oItem的其余属性保持不变。这有意义吗…？是的，你是对的。我已经更新了答案，并在不覆盖整个“oItem”对象的情况下更改了样式。在plunker中有另一个注释解决方案。您的答案是works！我不得不稍微修改一下$scope，然后才能在我的生产环境中使用它，并添加了一个ng init来应用正确的样式以正确显示默认值。但是现在一切都好了，谢谢！！

<select  ng-model="oItem.locno" ng-class="styleOItem" class="selectedValueDeleted" ng-change="styleSelectOnChange()">
        <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>

$scope.styleSelectOnChange = function() {
    angular.forEach($scope.locations, function(loopedObject) {
      if (loopedObject.locno === $scope.oItem.locno) {
        if (loopedObject.deleted) {
          $scope.styleOItem = "isDeleted";
        } else {
          $scope.styleOItem = "isNotDeleted";
        }
      }

    });
  };