JSFiddle - React, Tailwind, and code Playground

by tadchristiansen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<div ng-app="angularApp">
    <h4>testCtrl1</h4>
    <h5>(not initialized)</h5>
    <div ng-controller="testCtrl1">
        selectedOptions: {{selectedOptions}}
        <br />
        <select multiple ui-select2="" ng-model="selectedOptions" style="width: 300px">
		    <optgroup ng-repeat="category in categories" label="{{category.label}}">
                <option ng-repeat="option in category.options" value="{{option.value}}">{{option.desc}} - {{option.value}}</option>
            </optgroup>
	    </select>
    </div>
    <h4>testCtrl2 </h4>
    <h5>(initialized, but first selected blanks out the array if you use the option group select)</h5>
    <div ng-controller="testCtrl2">
        selectedOptions: {{selectedOptions}}
        <br />
        Option Group: <select multiple ui-select2 ng-model="selectedOptions" style="width: 300px">
		    <optgroup ng-repeat="category in categories" label="{{category.label}}">
                <option ng-repeat="option in category.options" value="{{option.value}}">{{option.desc}} - {{option.value}}</option>
            </optgroup>
	    </select>
        <br />
        Options Only: <select multiple...

JavaScript

angular.module('angularApp', ['ui']);

function testCtrl1($scope)
{
    $scope.selectedOptions = ['1'];
    $scope.categories = [{text: 'cat1', children: [{text: 'one', id: 1}, {text: 'two', id: 2}]}, {text: 'cat2', children: [{text: 'three', id: 3}, {text: 'four', id: 4}]}];
}