JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<div ng-app="campaignListing">
    <div>
        <div class="content" ng-controller="CampaignListController as ctrl">
             <h2>Campaign Administration</h2>
 <a href="" class="btn_new">+</a>

            <div class="filters">
                <select id="multiselect_status" multiselect ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
                    <option value="active">Active</option>
                    <option value="suspended">Suspended</option>
                    <option value="closed">Closed</option>
                </select>
            </div>
        </div>
    </div>
</div>

JavaScript

angular.module('campaignListing', [])
    .controller('CampaignListController', CampaignListController)
    .directive('multiselect', MultiSelectDirective);

function CampaignListController($http) {
    this.filters = {
        status: 'active',
        client: null
    };
    var campaigns = {};
    this.update_fields = function () {
        console.log("update!");
        console.log(this.filters);
    }
}

function MultiSelectDirective() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $(element).multiselect({
                includeSelectAllOption: true,
                enableFiltering: true,
                nonSelectedText: 'Status'
            });
        }
    }
}
/*
$(document).ready(function() {
      $('#multiselect_status').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,
        nonSelectedText: 'Status'
      });
    });
*/

/*
var my_app = angular.module("campaign_listing", []);
    var controllers = {};
    controllers.campaign_list_controller = function($http) {
      this.filters = {
        status: 'active',
        client: null
      };
      var campaigns = {};
      this.update_fields = function() {
        console.log("update!");
        console.log(this.filters);
      }
    }
    my_app.controller(controllers);*/