JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="mainCtrl">

    list + list2 <select al-select="selected">
        <option al-option="null">---</option>
        <option al-repeat="item in list" al-option="item">{{item.name}}</option>
        <optgroup label="Linux">
            <option al-repeat="linux in list2" al-option="linux">Linux {{linux.codeName}}</option>
        </optgroup>
    </select>

    <br/> selected: {{selected | json}}
    <br/>
    <button al-click="set()">set</button>
    <button al-click="add()">add</button>
    <br/>

    Only first list:
    <select al-select="selected">
        <option al-repeat="item in list" al-option="item">{{item.name}}</option>
    </select>

</div>

JavaScript

function mainCtrl(scope) {
    scope.list = [
        { id: 2, name: 'macos' },
        { id: 3, name: 'windows' },
        { id: 4, name: 'freebsd' },
        { id: 5, name: 'unix' }
    ];
    scope.list2 = [
        { id: 1, codeName: 'ubuntu' },
        { id: 2, codeName: 'debian' },
        { id: 3, codeName: 'redhat' }
    ];
    scope.selected = scope.list[2];
    
    scope.set = function() {
        scope.selected = scope.list[1];
    };
    
    scope.add = function() {
        scope.list.push({
            id: scope.list.length,
            name: 'new item ' + scope.list.length
        })
    };    
};