Parse repeat attribute

- Allows to specify something else than "item" inside the repeat expression
- Allows to specify a promise inside the repeat expression
- Move out ui-select controller from the directive
- Various fixes and refactoring

Author: tkrotoff

README.md

@@ -2,7 +2,7 @@
 
 AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [Selectize](http://brianreavis.github.io/selectize.js/).
 
-- [Basic demo](http://plnkr.co/edit/GtOOWE?p=preview)
+- [Demo](http://plnkr.co/edit/GtOOWE?p=preview)
 - [Bootstrap theme](http://plnkr.co/edit/7Fpbtg?p=preview)
 
 ## Features
@@ -11,7 +11,7 @@ AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [
 - Available themes: Bootstrap, Select2 and Selectize
 - Keyboard support
 - jQuery not required (except for old browsers)
-- Small code base: 250 lines of JavaScript vs 20 KB for select2.min.js
+- Small code base: 400 lines of JavaScript vs 20 KB for select2.min.js
 
 For the roadmap, check [issue #3](https://github.com/angular-ui/ui-select/issues/3) and the [Wiki page](https://github.com/angular-ui/ui-select/wiki/Roadmap).
 
@@ -28,6 +28,25 @@ Check the [examples](https://github.com/angular-ui/ui-select/blob/master/example
   - select.js: `<script src="bower_components/ui-select/dist/select.js"></script>`
   - select.css: `<link rel="stylesheet" href="bower_components/ui-select/dist/select.css">`
 
+### Bootstrap theme
+
+If you already use Bootstrap, this theme will save you a lot of CSS code compared to the Select2 and Selectize themes.
+
+Bower:
+- `bower install bootstrap`
+- `<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">`
+- Or the [LESS](http://lesscss.org/) version: `@import "bower_components/bootstrap/less/bootstrap.less";`
+
+[Bootstrap CDN](http://www.bootstrapcdn.com/):
+- `<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">`
+
+Configuration:
+```JavaScript
+app.config(function(uiSelectConfig) {
+  uiSelectConfig.theme = 'bootstrap';
+});
+```
+
 ### Select2 theme
 
 Bower:
@@ -61,23 +80,62 @@ app.config(function(uiSelectConfig) {
 });
 ```
 
-### Bootstrap theme
+## FAQ
 
-If you already use Bootstrap, this theme will save you a lot of CSS code compared to the Select2 and Selectize themes.
+### ng-model not working with a simple variable on $scope
 
-Bower:
-- `bower install bootstrap`
-- `<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">`
-- Or the [LESS](http://lesscss.org/) version: `@import "bower_components/bootstrap/less/bootstrap.less";`
+You cannot write:
+```HTML
+<ui-select ng-model="item"> <!-- Wrong -->
+  [...]
+</ui-select>
+```
 
-[Bootstrap CDN](http://www.bootstrapcdn.com/):
-- `<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">`
+You need to write:
+```HTML
+<ui-select ng-model="item.selected"> <!-- Correct -->
+  [...]
+</ui-select>
+```
+
+Or:
+```HTML
+<ui-select ng-model="$parent.item"> <!-- Hack -->
+  [...]
+</ui-select>
+```
+
+For more explanations, check [ui-select #18](https://github.com/angular-ui/ui-select/issues/18) and [angular.js #6199](https://github.com/angular/angular.js/issues/6199).
+
+### ng-bind-html gives me "Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context"
+
+You need to use module [ngSanitize](http://docs.angularjs.org/api/ngSanitize) (recommended) or [$sce](http://docs.angularjs.org/api/ng/service/$sce):
 
-Configuration:
 ```JavaScript
-app.config(function(uiSelectConfig) {
-  uiSelectConfig.theme = 'bootstrap';
-});
+$scope.trustAsHtml = function(value) {
+  return $sce.trustAsHtml(value);
+};
+```
+
+```HTML
+<div ng-bind-html="trustAsHtml((item | highlight: $select.search))"></div>
+```
+
+### I get "TypeError: Object [...] has no method 'indexOf' at htmlParser"
+
+You are using ng-bind-html with a number:
+```HTML
+<div ng-bind-html="person.age | highlight: $select.search"></div>
+```
+
+You should write instead:
+```HTML
+<div ng-bind-html="''+person.age | highlight: $select.search"></div>
+```
+
+Or:
+```HTML
+<div ng-bind-html="person.age.toString() | highlight: $select.search"></div>
 ```
 
 ## Run the tests
@@ -90,7 +148,7 @@ bower update # Installs all ui-select dependencies (bower.json) inside bower_com
 
 To run the tests:
 ```
-grunt build # Build dist/select.js
+grunt build # Builds dist/select.js
 grunt test # Launches Karma
 ```
 
@@ -99,4 +157,4 @@ grunt test # Launches Karma
 - Run the tests
 - Try the [examples](https://github.com/angular-ui/ui-select/blob/master/examples)
 
-When issuing a pull request, please exclude changes in the "dist" folder to avoid merge conflicts.
+When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.

bower.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "jquery": "~1.11",
+    "angular-sanitize": "~1.2",
     "angular-mocks": "~1.2"
   }
 }

examples/bootstrap.html

@@ -18,7 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!-- ui-select files -->
@@ -32,7 +33,7 @@
   </style>
 </head>
 
-<body ng-controller="MainCtrl">
+<body ng-controller="DemoCtrl">
   <script src="demo.js"></script>
 
   <p>Selected: {{person.selected.name}}</p>
@@ -48,8 +49,8 @@
           <ui-select ng-model="person.selected" theme="bootstrap">
             <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
             <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>
+              <div ng-bind-html="item.name | highlight: $select.search"></div>
+              <small ng-bind-html="item.email | highlight: $select.search"></small>
             </choices>
           </ui-select>
 
@@ -64,8 +65,8 @@
             <ui-select ng-model="person.selected" theme="bootstrap">
               <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
               <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>
+                <span ng-bind-html="item.name | highlight: $select.search"></span>
+                <small ng-bind-html="item.email | highlight: $select.search"></small>
               </choices>
             </ui-select>
 
@@ -86,8 +87,8 @@
           <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
             <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
             <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>
+              <div ng-bind-html="item.name | highlight: $select.search"></div>
+              <small ng-bind-html="item.email | highlight: $select.search"></small>
             </choices>
           </ui-select>
 

examples/demo.html

@@ -18,7 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!-- ui-select files -->
@@ -54,37 +55,42 @@
   </style>
 </head>
 
-<body ng-controller="MainCtrl">
+<body ng-controller="DemoCtrl">
   <script src="demo.js"></script>
 
-  <p>Selected: {{person.selected.name}}</p>
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
 
-  <p>Select2 theme:</p>
-  <ui-select ng-model="person.selected" theme="select2" style="width: 300px;">
-    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-    <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>
+  <h3>Bootstrap theme</h3>
+  <p>Selected: {{address.selected.formatted_address}}</p>
+  <ui-select ng-model="address.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+    <match placeholder="Enter an address...">{{$select.selected.formatted_address}}</match>
+    <choices repeat="address in getAddress($select.search) track by $index">
+      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
     </choices>
   </ui-select>
-  <br><br>
 
-  <p>Selectize theme:</p>
-  <ui-select ng-model="person.selected" theme="selectize" style="width: 300px;">
-    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-    <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>
+  <h3>Select2 theme</h3>
+  <p>Selected: {{person.selected}}</p>
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="width: 300px;">
+    <match placeholder="Select a person in the list or search his age...">{{$select.selected.name}}</match>
+    <choices repeat="person in people | filter: {age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
     </choices>
   </ui-select>
-  <br>
 
-  <p>Bootstrap theme:</p>
-  <ui-select ng-model="person.selected" theme="bootstrap" style="width: 300px;">
-    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
-    <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>
+  <h3>Selectize theme</h3>
+  <p>Selected: {{country.selected}}</p>
+  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
+    <match placeholder="Select or search a country in the list...">{{$select.selected.name}}</match>
+    <choices repeat="country in countries | filter: $select.search">
+      <span ng-bind-html="country.name | highlight: $select.search"></span>
+      <small ng-bind-html="country.code | highlight: $select.search"></small>
     </choices>
   </ui-select>
 </body>