JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  <link href="http://ivaynberg.github.com/select2/select2-3.2/select2.css" rel="stylesheet"/>
  <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-controller="MainCtrl">
  <h2>Single</h2>
  <pre>Selected: {{selectedSingle|json}}</pre>
  <select ui-select2 ng-model="selectedSingle" data-placeholder="-- Select One --">
    <option></option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.text}}</option>
  </select>
  <h2>Multiple</h2>
  <pre>Selected: {{selectedMulti|json}}</pre>
  <input style="width: 197px" ui-select2="multiOptions" ng-model="selectedMulti" />
</div>

JavaScript

var app = angular.module('app', ['ui']).service('KeyChars', function() {
   this.Characteristics = [{
                  'id': 1, 'text': 'Patient-Centered Care'
              }, {
                  'id': 2, 'text': 'Communication'
              }, {
                  'id': 3, 'text': 'Quality & Safety'
              }, {
                  'id': 4, 'text': 'Ethics'
              }, {
                  'id': 5, 'text': 'Knowledge'
              }, {
                  'id': 6, 'text': 'Problem Solving'
              }, {
                  'id': 7, 'text': 'Lifelong Learning'
              }, {
                  'id': 8, 'text': 'Collaboration'
              }];
});

app.controller('MainCtrl', function($scope, $http, KeyChars) {
    // $http.get('data.json').success(function(response) {
    //     $scope.items = response;
    // });

    $scope.items = KeyChars.Characteristics ;

/* $scope.multiOptions = {
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "data.json",
            data: function(term, page) {
                return {};
            },
            results: function(data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {
                    results: data
                };
            }
        }
    };*/
    $scope.multiOptions = {
        //  minimumInputLength: 1,
        multiple: true,
        placeholder: "Pls select",
        data:  KeyChars.Characteristics
    };

});