JSFiddle - React, Tailwind, and code Playground

by Samar Pattanayak

HTML

<div ng-app="selectExample">
  <div ng-controller="ExampleController">
    <ul>
      <li ng-repeat="item in colors">
        {{item.name}}
        <input type="checkbox" ng-model="item.notAnOption" />
      </li>
    </ul>
    <lable>
      Select a color :
      <select ng-model="myColorAs" ng-options="color.id as color.name for color in colors">
      </select>
    </lable>
    </br>
    Select a color(nullable) :
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
    </br>
    Select a color group by shade :
    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
    </select>
    </br>
    Select a color group by and disabled :
    <select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
    </select>
    <table style="height:10px;padding-top:10px">
      <tr>
        <td>Selected Itemis : </td>
        <td style="color:{{myColor.name}}">{{myColor}} {{myColor.name}}</td>
      </tr>
      <tr>
        <td>Selected item As : </td>
        <td> {{myColorAs}}</td>
      </tr>
    </table>



  </div>

</div>

CSS

tr,
td {
  border: 1px solid blue;
}

JavaScript

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [{
      id: 1,
      name: 'black',
      shade: 'dark'
    }, {
      id: 2,
      name: 'white',
      shade: 'light',
      notAnOption: true
    }, {
      id: 3,
      name: 'red',
      shade: 'dark',
      notAnOption: false
    }, {
      id: 4,
      name: 'blue',
      shade: 'dark',
      notAnOption: true
    }, {
      id: 5,
      name: 'yellow',
      shade: 'light',
      notAnOption: false
    }];
    $scope.myColor = $scope.colors[2];
    $scope.myColorAs = $scope.colors[2].name;
    //$scope.colors[2];
  }]);