JSFiddle - React, Tailwind, and code Playground

by dceast

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div ng-controller="Main">
    <p>{{greeting}}</p>
    
    <label>Select a Color:</label><br>
    <select id="sel" multiple ng-model="selected" ng-options="item.name for item in colors">
    </select>
    <br/>
    <input ng-model="newItem" type="text" /> <button ng-click="add()">Add</button>
    <br />
    <tt> selectedValues = {{selectedValues}}</tt>
    
</div>

CSS

select {
 height: 200px;
}

JavaScript

var fiddleApp = angular.module('fiddleApp', []);

fiddleApp.controller('Main', ['$scope', function($scope) {
    // is angular loaded and working?
    // (reduce future debugging)
    $scope.greeting = 'Hola!';
   
    $scope.colors = [
        { id:1, name: "Blue" },
        { id:2, name: "Green" },
        { id:3, name: "Yellow" },
        { id:4, name: "Red" }
    ];    
    
    $scope.selected = [
        $scope.colors[0],
        $scope.colors[3]
    ];
    
    $scope.selectedValues = [];
    
    $scope.newItem = "Purple";
    
    $scope.add = function () {
        
        var newColor = { 
            id: $scope.newItem, 
            name: $scope.newItem 
        };        
        
        $scope.colors.push( newColor );
        $scope.selected.push( newColor );    
        
    };    
    
    $scope.$watch('selected', function(nowSelected){
        $scope.selectedValues = [];
        
        if( ! nowSelected ){
            // here we've initialized selected already
            // but sometimes that's not the case
            // then we get null or undefined
            return;
        }
        angular.forEach(nowSelected, function(val){
            console.log(val);
            $scope.selectedValues.push( val.id.toString() );
        });
    }, true);
    
}]);


// http://docs.angularjs.org/guide/bootstrap Manual Initialization
angular.bootstrap(document, ['fiddleApp']);