javascript - 如何根据选项是否与 angularJS 中的数据相关来更改选项颜色？

Question

这是一个示例代码

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
  $scope.options = ["hello", "ola", "bonjourno", "konichiwa"];
  $scope.selectedOption = null;
  $scope.selectedData = null;
  $scope.datas = [{
    id: "hello",
    value: "helloValue"
  }, {
    id: "bonjourno",
    value: "bonjourno value"
  }];
  $scope.selectData = function(str) {
    $scope.selectedData = null;
    for (var i = 0; i < $scope.datas.length; i++) {
      if ($scope.datas[i].id === str) {
        $scope.selectedData = $scope.datas[i];
        break;
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <select ng-options="d for d in options"
            ng-model="selectedOption"
            ng-change="selectData(selectedOption)">
    </select>
    <div>
      {{selectedData.value}}
    </div>
  </div>
</div>

我的选项与我的应用程序最终版本中的一组数据相关 我将添加或删除与此选项和子选项相关的数据。因此，为了检查数据是否与该选项相关，我想动态更改选项颜色。

所以在这种情况下，选项 hello 和 bonjourno 应该是红色的。

我正在使用 AngularJS，并且知道如何使用 JQuery 和 CSS 添加类和更改选项颜色，但我真的不知道使用 AngularJS 实现我的目标的最佳方法。如果是这样，我应该使用指令吗？

非常感谢任何帮助。

Answer 1

如果你想要 option select 内的元素要着色，如果您改为使用 ng-repeat 会更容易在 option 上.这样，您可以使用 ng-style指令应用你想要的背景颜色。

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
  $scope.options = ["hello", "ola", "bonjourno", "konichiwa"];
  $scope.selectedOption = null;
  $scope.selectedData = null;
  $scope.datas = [{
    id: "hello",
    value: "helloValue",
    color: "#f00",
  }, {
    id: "bonjourno",
    value: "bonjourno value",
    color: "#f00",
  }];
  $scope.getData = function (option) {
    for (var i = 0; i < $scope.datas.length; i++) {
      if ($scope.datas[i].id === option) {
        return $scope.datas[i];
      }
    }
  };
  $scope.selectData = function (option) {
    $scope.selectedData = $scope.getData(option);
  };
  $scope.getColor = function (option) {
    var data = $scope.getData(option);
    return data != null ? data.color : 'inherit';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <select ng-model="selectedOption"
            ng-change="selectData(selectedOption)">
      <option ng-repeat="option in options"
              ng-value="option"
              ng-style="{ background: getColor(option) }">{{ option }}</option>
    </select>
    <div>{{ selectedData.value }}</div>
  </div>
</div>

如果您想要整个 select要根据当前选择着色的元素，只需添加 ng-style 即可同时使用 ng-options .

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
  $scope.options = ["hello", "ola", "bonjourno", "konichiwa"];
  $scope.selectedOption = null;
  $scope.selectedData = null;
  $scope.datas = [{
    id: "hello",
    value: "helloValue",
    color: "#f00",
  }, {
    id: "bonjourno",
    value: "bonjourno value",
    color: "#f00",
  }];
  $scope.getData = function (option) {
    for (var i = 0; i < $scope.datas.length; i++) {
      if ($scope.datas[i].id === option) {
        return $scope.datas[i];
      }
    }
  };
  $scope.selectData = function (option) {
    $scope.selectedData = $scope.getData(option);
  };
  $scope.getColor = function (option) {
    var data = $scope.getData(option);
    return data != null ? data.color : 'inherit';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <select ng-options="d for d in options"
            ng-model="selectedOption"
            ng-change="selectData(selectedOption)"
            ng-style="{ background: getColor(selectedOption) }">
    </select>
    <div>{{ selectedData.value }}</div>
  </div>
</div>

在上面的两个示例中，我都将颜色隐藏在数据中。对于像您的示例这样的少量选项，如果您不想向选项添加更多元数据，则可以简单地将基于选项的颜色选择直接硬编码到 HTML 中。

编辑

为了避免对 getData 中的相应元素进行线性搜索(即 datas )数组每当 selectedOption更改，您可以将数组转换为查找。当然，这假设您不需要 datas以数组形式用于其他目的。

var app = angular.module('myApp', []);
app.service('DataService', function () {
  this.get = function () {
    return [
      {
        id: "hello",
        value: "helloValue",
        color: "#f00",
      }, {
        id: "bonjourno",
        value: "bonjourno value",
        color: "#f00",
      },
    ];
  };
});
app.controller('mainCtrl', function ($scope, DataService) {
  $scope.options = ["hello", "ola", "bonjourno", "konichiwa"];
  $scope.selectedOption = null;
  $scope.selectedData = null;
  // Map data array into a lookup for convenient retrieval
  $scope.datas = DataService.get().reduce(function (lookup, data) {
    lookup[data.id] = data;
    return lookup;
  }, {});
  $scope.selectData = function (option) {
    $scope.selectedData = $scope.datas[option];
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <select ng-options="d for d in options"
            ng-model="selectedOption"
            ng-change="selectData(selectedOption)"
            ng-style="{
              background: selectedData != null ? selectedData.color : 'inherit'
            }">
    </select>
    <div>{{ selectedData.value }}</div>
  </div>
</div>