JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<div  ng-app ng-controller="MyCtrl">
    <label>Select multiple with initial value</label>
            <select multiple  ng-model="colorsSelectedByRef" 
                ng-options="color as color.value for color in colors">             
            </select>
    
<table>    
<tr ng-repeat="obj in list">

        <td>{{ obj.name}}</td>

        <td>
            <select multiple  ng-model="obj.colors" 
            ng-options="color as color.value for color in colors">
            </select>
            
        </td>
        <td>
            <select multiple  ng-model="obj.colors" ng-options="color as color.value for color in colors">
                <option ng-repeat="color in colors" value="{{color.id}}" >{{color.value}}</option>
            </select>
        </td>
</tr>
</table>                        
<div>

JavaScript

function MyCtrl($scope) {

    $scope.list = [
        {
        "id": 1,
        "name": "toto",
        "colors": [
            {
            "id": 1,
            "value": "vert"},
        {
            "id": 2,
            "value": "Rouge"}]},
    {
        "id": 2,
        "name": "titi",
        "colors": [
            {
            "id": 1,
            "value": "vert"},
        {
            "id": 3,
            "value": "Bleu"}]},
    {
        "id": 1,
        "name": "tata",
        "colors": [
            {
            "id": 4,
            "value": "jaune"}]}];

    $scope.colors = [
        {
        "id": 1,
        "value": "vert"},
    {
        "id": 2,
        "value": "Rouge"},
    {
        "id": 3,
        "value": "Bleu"},
    {
        "id": 4,
        "value": "jaune"}];

    $scope.colorsSelectedByRef = [$scope.colors[0], $scope.colors[1]];

}