Cleaning up code and API

Author: Dean Sofer

dist/select.js

@@ -43,10 +43,10 @@ angular.module('ui.select', [])
 
       ctrl.open = false;
 
-      ctrl.activate = function($event) {
+      ctrl.activate = function() {
         ctrl.open = true;
         // Give it time to appear before focus
-        $timeout(function() {
+        setTimeout(function() {
           ctrl.input[0].focus();
         });
       };
@@ -59,7 +59,7 @@ angular.module('ui.select', [])
 
       ctrl.close = function() {
         ctrl.open = false;
-        ctrl.search = "";
+        ctrl.search = '';
       };
 
       ctrl.input = $element.find('input'); // TODO could break if input is at other template
@@ -136,7 +136,7 @@ angular.module('ui.select', [])
     compile: function(tElement, tAttrs) {
 
       tElement.querySelectorAll('.ui-select-choices-row')
-        .attr("ng-repeat", 'item in ' + tAttrs.data)
+        .attr("ng-repeat", tAttrs.repeat)
         .attr("ng-mouseenter", '$select.activeIdx=$index')
         .attr("ng-click", '$select.select(item)');
 
@@ -237,12 +237,12 @@ angular.module('ui.select', [])
 
 angular.module('ui.select').run(['$templateCache', function ($templateCache) {
 	$templateCache.put('bootstrap/choices.tpl.html', '<ul class="ui-select-choices ui-select-choices-content dropdown-menu" role="menu" aria-labelledby="dLabel"> <li class="ui-select-choices-row" ng-class="{active: $select.activeIdx==$index}"> <a ng-transclude></a> </li> </ul> ');
-	$templateCache.put('bootstrap/match.tpl.html', '<a class="btn btn-default ui-select-match" ng-hide="$select.open" ng-class="{\'text-success\': $select.selected==undefined}" ng-click="$select.activate($event)"> <span ng-hide="$select.selected" class="text-muted">{{placeholder}}</span> <span ng-show="$select.selected" ng-transclude></span> <span class="caret"></span> </a> ');
-	$templateCache.put('bootstrap/select.tpl.html', '<div class="dropdown" ng-class="{open:$select.open}"> <div class="ui-select-match" ng-click="$select.activate($event)"></div> <input type="text" class="form-control ui-select-search" autocomplete="off" tabindex="" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-show="$select.open"> <div class="ui-select-choices"></div> </div> ');
+	$templateCache.put('bootstrap/match.tpl.html', '<a class="btn btn-default ui-select-match" ng-hide="$select.open" ng-class="{\'text-success\': $select.selected==undefined}" ng-click="$select.activate()"> <span ng-hide="$select.selected" class="text-muted">{{placeholder}}</span> <span ng-show="$select.selected" ng-transclude></span> <span class="caret"></span> </a> ');
+	$templateCache.put('bootstrap/select.tpl.html', '<div class="dropdown" ng-class="{open:$select.open}"> <div class="ui-select-match" ng-click="$select.activate()"></div> <input type="text" class="form-control ui-select-search" autocomplete="off" tabindex="" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-show="$select.open"> <div class="ui-select-choices"></div> </div> ');
 	$templateCache.put('select2/choices.tpl.html', '<ul class="ui-select-choices ui-select-choices-content select2-results"> <li class="ui-select-choices-row" ng-class="{\'select2-highlighted\': $select.activeIdx==$index}"> <div class="select2-result-label" ng-transclude></div> </li> </ul> ');
-	$templateCache.put('select2/match.tpl.html', '<a class="select2-choice ui-select-match" ng-class="{\'select2-default\': $select.selected==undefined}" ng-click="$select.activate($event)"> <span ng-hide="$select.selected" class="select2-chosen">{{$select.placeholder}}</span> <span ng-show="$select.selected" class="select2-chosen" ng-transclude></span> <span class="select2-arrow"><b></b></span> </a> ');
+	$templateCache.put('select2/match.tpl.html', '<a class="select2-choice ui-select-match" ng-class="{\'select2-default\': $select.selected==undefined}" ng-click="$select.activate()"> <span ng-hide="$select.selected" class="select2-chosen">{{$select.placeholder}}</span> <span ng-show="$select.selected" class="select2-chosen" ng-transclude></span> <span class="select2-arrow"><b></b></span> </a> ');
 	$templateCache.put('select2/select.tpl.html', '<div class="select2 select2-container" ng-class="{\'select2-container-active select2-dropdown-open\': $select.open}"> <div class="ui-select-match"></div> <div ng-class="{\'select2-display-none\': !$select.open}" class="select2-drop select2-with-searchbox select2-drop-active"> <div class="select2-search"> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search select2-input" ng-model="$select.search"> </div> <div class="ui-select-choices"></div> </div> </div> ');
 	$templateCache.put('selectize/choices.tpl.html', '<div ng-show="$select.open" class="ui-select-choices selectize-dropdown single"> <div class="ui-select-choices-content selectize-dropdown-content"> <div class="ui-select-choices-row" ng-class="{\'active\': $select.activeIdx==$index}" ng-click="$select(item)" ng-mouseenter="$select.index=$index"> <div class="option" data-selectable ng-transclude></div> </div> </div> </div> ');
 	$templateCache.put('selectize/match.tpl.html', '<div ng-hide="$select.open || !$select.selected" class="ui-select-match" ng-transclude></div> ');
-	$templateCache.put('selectize/select.tpl.html', '<div class="selectize-control single"> <div class="selectize-input" ng-class="{\'focus\': $select.open}" ng-click="$select.activate($event)"> <div class="ui-select-match"></div> <input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-hide="$select.selected && !$select.open"> </div> <div class="ui-select-choices"></div> </div> ');
+	$templateCache.put('selectize/select.tpl.html', '<div class="selectize-control single"> <div class="selectize-input" ng-class="{\'focus\': $select.open}" ng-click="$select.activate()"> <div class="ui-select-match"></div> <input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-hide="$select.selected && !$select.open"> </div> <div class="ui-select-choices"></div> </div> ');
 }]);

examples/bootstrap.html

@@ -64,7 +64,7 @@
 
           <ui-select ng-model="person.selected" theme="bootstrap">
             <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-            <choices data="people | filter: $select.search">
+            <choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
               <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
             </choices>

examples/demo.html

@@ -58,7 +58,7 @@
   <p>Select2 theme (default):</p>
   <ui-select ng-model="person.selected" style="width: 300px;">
     <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-    <choices data="people | filter: $select.search">
+    <choices repeat="item in people | filter: $select.search">
       <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
       <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
     </choices>

examples/select2-bootstrap3.html

@@ -55,7 +55,7 @@
 
           <ui-select ng-model="person.selected" theme="select2" class="form-control">
             <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-            <choices data="people | filter: $select.search">
+            <choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
               <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
             </choices>
@@ -71,7 +71,7 @@
 
             <ui-select ng-model="person.selected" theme="select2" class="form-control">
               <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-              <choices data="people | filter: $select.search">
+              <choices repeat="item in people | filter: $select.search">
                 <span ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></span>
                 <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
               </choices>

examples/selectize-bootstrap3.html

@@ -70,7 +70,7 @@
 
           <ui-select ng-model="person.selected" theme="selectize">
             <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-            <choices data="people | filter: $select.search">
+            <choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
               <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
             </choices>
@@ -86,7 +86,7 @@
 
             <ui-select ng-model="person.selected" theme="selectize">
               <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-              <choices data="people | filter: $select.search">
+              <choices repeat="item in people | filter: $select.search">
                 <span ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></span>
                 <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
               </choices>

src/select.js

@@ -46,7 +46,7 @@ angular.module('ui.select', [])
       ctrl.activate = function() {
         ctrl.open = true;
         // Give it time to appear before focus
-        $timeout(function() {
+        setTimeout(function() {
           ctrl.input[0].focus();
         });
       };
@@ -59,7 +59,7 @@ angular.module('ui.select', [])
 
       ctrl.close = function() {
         ctrl.open = false;
-        ctrl.search = "";
+        ctrl.search = '';
       };
 
       ctrl.input = $element.find('input'); // TODO could break if input is at other template
@@ -136,7 +136,7 @@ angular.module('ui.select', [])
     compile: function(tElement, tAttrs) {
 
       tElement.querySelectorAll('.ui-select-choices-row')
-        .attr("ng-repeat", 'item in ' + tAttrs.data)
+        .attr("ng-repeat", tAttrs.repeat)
         .attr("ng-mouseenter", '$select.activeIdx=$index')
         .attr("ng-click", '$select.select(item)');
 

test/select.spec.js

@@ -31,7 +31,7 @@ describe('ui-select tests', function() {
     return compileTemplate(
       '<ui-select ng-model="selection"> \
         <match placeholder="Pick one...">{{$select.selected.name}}</match> \
-        <choices data="matches | filter: $select.search"> \
+        <choices repeat="item in matches | filter: $select.search"> \
           <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div> \
           <div>{{item.email}}</div> \
         </choices> \