JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/extensions/igniteui-angular.js"></script>
<script src="https://igniteui.github.io/help-samples/data-files/northwindProducts.js"></script>

<link href="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="sampleApp" ng-controller="gridController">
        <div class="row">
            <div class="col-md-8">
                <ig-combo id="combo1"
                          data-source="data"
                          value-key-type="number"
                          value-key="ProductID"
                          text-key-type="string"
                          text-key="ProductName"
                          ng-model="combo.value1">
                </ig-combo>
                
                <ig-date-picker id="datePicker1"></ig-date-picker>
                <input type="checkbox" ng-model="myBoolProperty">
                
            </div>
            {{myBoolPropery}}
        </div>


        <hr>
    </div>

CSS

.row {
    margin-right: 0;
    margin-left: 0;
}

JavaScript

$(function () {
    var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
    sampleApp.controller('gridController', function ($scope) {
       	$scope.formatterFunc = function(val, record) {
          return val.replace("<", "&lt;")
        }
        
        $scope.data = angular.copy(northwindProducts.results);
        $scope.combo = {
          value1: 1,
          value2: "Chang"
        };
        
        $scope.myBoolProperty = true;
        
      	$scope.$watch("myBoolProperty", function(newValue, oldValue) {
          var opts = $.extend({}, $('#combo1').igCombo('option'));
          opts.mode = newValue ? 'dropdown' : 'readonly';
          //recreate the combo
           $('#combo1').igCombo('destroy');
           $('#combo1').igCombo(opts);
           
           $('#datePicker1').igDatePicker('option', 'disabled', newValue);
        });

    });
});