Separate templates on themes

README.md

@@ -3,19 +3,14 @@ ui-select [![Build Status](https://travis-ci.org/angular-ui/ui-select.png)](http
 
 A native version of select2.
 
-Requires ui.keypress from ui-utils
-
-
 ### Prototype usage:
 
 ```html
-<ui-select ng-model="data.custom">
-  <li 
-    ng-repeat="item in data.items | filter : $search" 
-    ng-class="{highlight:highlight==$index}" 
-    ng-click="$select(item)" 
-    ng-mouseover="$parent.highlight=$index">
-    <h4>{{item.title}}</h4>
-  </li>
+<ui-select ng-model="data.custom" style="width:300px">
+  <match placeholder="Pick one...">{{$select.selected.name}}</match>
+  <choices data="data.items | filter : $select.search">
+      <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
+      <div> {{item.email}} </div>
+  </choices>
 </ui-select>
 ```

bower.json

@@ -16,8 +16,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular": "~1.0.8",
-    "angular-mocks": "~1.0.8",
+    "angular": "~1.2.0",
+    "angular-mocks": "~1.2.0",
     "jquery": "~2.0.3"
   }
 }

demo/demo.js

@@ -1,4 +1,10 @@
 angular.module('DemoApp', ['ui.select'])
+
+  .config(function(uiSelectConfig){
+    // uiSelectConfig.defaultTheme = 'select2';
+    // uiSelectConfig.defaultTheme = 'selectize';
+  })
+
   .controller('MainCtrl', ['$scope', function ($scope) {
 
     $scope.data = {};

demo/index.html

@@ -4,16 +4,20 @@
     <meta charset="utf-8">
     <title>Angular ui-select</title>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
 
-    <!-- https://github.com/angular-ui/ui-utils/blob/master/modules/keypress/keypress.js -->
-    <script src="keypress.js"></script>
-
     <script src="../src/select.js"></script>
     <script src="demo.js"></script>
 
-    <!-- <link rel="stylesheet" href="../src/select.css"/> -->
-    <link rel="stylesheet" href="../src/select2.css"/>
+    <!-- Select2 Theme -->
+    <link rel="stylesheet" href="../src/select2/select2.css"/>
+
+    <!-- Selectize (Default) Theme -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.default.css"/> -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.bootstrap2.css"/> -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.bootstrap3.css"/> -->
+
+    <link rel="stylesheet" href="../src/select.css"/>
 
     <style>
         body {
@@ -33,7 +37,7 @@
 
     <ui-select ng-model="data.custom" style="width:300px">
       <match placeholder="Pick one...">{{$select.selected.name}}</match>
-      <choices data="item in data.items | filter : $select.search">
+      <choices data="data.items | filter : $select.search">
           <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
           <div> {{item.email}} </div>
       </choices>

karma.conf.js

@@ -14,11 +14,13 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'bower_components/jquery/jquery.js',
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/jquery/jquery.js',
+
       'src/select.js',
-      'test/**/*.spec.js'
+      'test/**/*.spec.js',
+      '**/*.tpl.html'
     ],
 
 
@@ -27,6 +29,14 @@ module.exports = function(config) {
 
     ],
 
+    preprocessors: {
+      '**/*.tpl.html': ['ng-html2js']
+    },
+
+    ngHtml2JsPreprocessor: {
+      // stripPrefix: 'public/',
+      prependPrefix: '../'
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'

package.json

@@ -13,7 +13,8 @@
     "karma-firefox-launcher": "~0.1.0",
     "karma-jasmine": "~0.1.3",
     "karma-phantomjs-launcher": "~0.1.0",
-    "grunt-conventional-changelog": "~1.0.0"
+    "grunt-conventional-changelog": "~1.0.0",
+    "karma-ng-html2js-preprocessor": "~0.1.0"
   },
   "scripts": {
     "test": "grunt test"

src/select.css

@@ -38,3 +38,11 @@
 	width: 200px;
 }
 
+.ui-select-match {
+	cursor: pointer;
+}
+
+.ui-select-highlight {
+	font-weight: bold;
+}
+