select2 in status screen

This commit is contained in:
saravanakumar_kandasami 2018-03-21 17:03:42 +05:30
parent f0fa6f6cf6
commit f348ac2d39
28 changed files with 1502 additions and 15 deletions

View File

@ -19,5 +19,6 @@ angular.module("clip-two", [
'ipCookie',
'angularUtils.directives.dirPagination',
'htmlToPdfSave',
'ui.select2',
]);

View File

@ -19,7 +19,7 @@
<div class="container" ng-init="init()">
<div class="row">
<!--<pre>{{searchData | json }}</pre> -->
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
University
</label>
@ -32,18 +32,18 @@
</div>
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
Course
</label>
<select class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}}<span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>
</div>
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
Batch
</label>

View File

@ -19,7 +19,7 @@
<div class="container" ng-init="init()">
<div class="row">
<!--<pre>{{searchData | json }}</pre> -->
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
University
</label>
@ -32,18 +32,18 @@
</div>
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
Course
</label>
<select class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}}<span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>
</div>
<div class="col-md-3">
<div class="col-md-4">
<label for="form-field-select-2">
Batch
</label>

View File

@ -37,7 +37,7 @@
Course
</label>
<select class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}}<span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>

View File

@ -81,7 +81,7 @@
<label>
Course
</label>
<select class="form-control" name="course" tabindex="4" id="course"
<select ui-select2 class="form-control" name="course" tabindex="4" id="course"
ng-model="myModel.courseName"
ng-options="courseDetails.CourseID as courseDetails.CourseName for courseDetails in myModel.universityName.courseDetails" ng-change="getStudentDetails(Form,myModel);">
<option value=""> Select Course</option>

View File

@ -37,7 +37,7 @@
Course
</label>
<select class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}} <span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>

View File

@ -96,7 +96,7 @@
Course
</label>
<select class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="2" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}}<span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>

View File

@ -137,7 +137,7 @@
Course
</label>
<select class="form-control" tabindex="4" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<select ui-select2 class="form-control" tabindex="4" class="cs-select cs-skin-elastic" name="course" ng-model="searchData.Course" ng-change="getValueChange()">
<option value="" selected>Select Course</option>
<option ng-repeat="itemCourse in courseData" value="{{itemCourse.CourseID}}">{{itemCourse.CourseName}}<span ng-show="itemCourse.CourseCode != ''">(<strong>{{itemCourse.CourseCode}}</strong>)</span></option>
</select>

View File

@ -8,7 +8,7 @@
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
height: 34px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--single .select2-selection__rendered {
@ -115,7 +115,7 @@
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px; }
border-radius: 0px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }

View File

@ -0,0 +1,3 @@
{
"directory": "bower_components"
}

View File

@ -0,0 +1,3 @@
node_modules
bower_components
demo/bower_components

View File

@ -0,0 +1,11 @@
{
"curly": true,
"eqeqeq": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"sub": true,
"boss": true,
"eqnull": true
}

View File

@ -0,0 +1,13 @@
language: node_js
node_js:
- "0.8"
- "0.10"
before_install:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- npm install -g karma bower grunt-cli
- bower install
- npm install
script: "grunt"

View File

@ -0,0 +1,8 @@
CONTRIBUTING
============
* Open a [Pull Request (PR)](https://github.com/angular-ui/ui-select2/pull/new/master)
* Make sure your PR is on a **new branch** you created off of the latest version of master
* Do **not** open a PR from your master branch
* Open a PR to start a discussion even if the code isn't finished (easier to collect feedback this way)
* Make sure all previous tests pass and add new tests for added behaviors

View File

@ -0,0 +1,59 @@
module.exports = function (grunt) {
'use strict';
var initConfig;
// Loading external tasks
require('load-grunt-tasks')(grunt);
// Project configuration.
initConfig = {
bower: 'bower_components',
pkg: grunt.file.readJSON('package.json'),
watch: {
test: {
// Lint & run unit tests in Karma
// Just running `$ grunt watch` will only lint your code; to run tests
// on watch, use `$ grunt watch:karma` to start a Karma server first
files: ['src/select2.js', 'test/select2Spec.js'],
tasks: ['jshint', 'karma:unit:run']
}
},
karma: {
options: {
configFile: 'test/karma.conf.js',
browsers: ['Firefox', 'PhantomJS']
},
unit: {
singleRun: true
},
watch: {
autoWatch: true
},
server: {
background: true
}
},
jshint: {
all:[
'gruntFile.js',
'src/**/*.js',
'test/**/*Spec.js'
],
options: {
jshintrc: '.jshintrc'
}
},
changelog: {
options: {
dest: 'CHANGELOG.md'
}
}
};
// Register tasks
grunt.registerTask('default', ['jshint', 'karma:unit']);
grunt.registerTask('watch', ['jshint', 'karma:watch']);
grunt.initConfig(initConfig);
};

View File

@ -0,0 +1,21 @@
The MIT License
Copyright (c) 2012 the AngularUI Team, http://angular-ui.github.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@ -0,0 +1,183 @@
ui-select2 (deprecated) [![Build Status](https://travis-ci.org/angular-ui/ui-select2.png)](https://travis-ci.org/angular-ui/ui-select2)
========================
# Annoucement
This **directive is now obsolete**. A new initiative, more active, and 100% angular is available at https://github.com/angular-ui/ui-select.
As development slowed down on ui-select2, it is getting unlikely that bugs will be fixed. So the new alternative should be used as soon as possible.
# Description
This directive allows you to enhance your select elements with behaviour from the [select2](http://ivaynberg.github.io/select2/) library.
# Requirements
- [AngularJS](http://angularjs.org/)
- [JQuery](http://jquery.com/)
- [Select2](http://ivaynberg.github.io/select2/)
## Setup
1. Install **Karma**, **Grunt** and **Bower**
`$ npm install -g karma grunt-cli bower`
2. Install development dependencies
`$ npm install`
3. Install components
`$ bower install`
4. ???
5. Profit!
## Testing
We use [Grunt](http://gruntjs.com/) to check for JavaScript syntax errors and execute all unit tests. To run Grunt, simply execute:
`$ grunt`
This will lint and test the code, then exit. To have Grunt stay open and automatically lint and test your files whenever you make a code change, use:
`$ grunt karma:server watch`
This will start a Karma server in the background and run unit tests in Firefox and PhantomJS whenever the source code or spec file is saved.
# Usage
We use [bower](https://github.com/bower/bower) for dependency management. Install AngularUI Select2 into your project by running the command
`$ bower install angular-ui-select2`
If you use a `bower.json` file in your project, you can have Bower save ui-select2 as a dependency by passing the `--save` or `--save-dev` flag with the above command.
This will copy the ui-select2 files into your `bower_components` folder, along with its dependencies. Load the script files in your application:
```html
<link rel="stylesheet" href="bower_components/select2/select2.css">
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/select2/select2.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-select2/src/select2.js"></script>
```
(Note that `jquery` must be loaded before `angular` so that it doesn't use `jqLite` internally)
Add the select2 module as a dependency to your application module:
```javascript
var myAppModule = angular.module('MyApp', ['ui.select2']);
```
Apply the directive to your form elements:
```html
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<option value=""></option>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
```
## Options
All the select2 options can be passed through the directive. You can read more about the supported list of options and what they do on the [Select2 Documentation Page](http://ivaynberg.github.com/select2/)
```javascript
myAppModule.controller('MyController', function($scope) {
$scope.select2Options = {
allowClear:true
};
});
```
```html
<select ui-select2="select2Options" ng-model="select2">
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
```
Some times it may make sense to specify the options in the template file.
```html
<select ui-select2="{ allowClear: true}" ng-model="select2">
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
```
To define global defaults, you can configure the `uiSelect2Config` injectable:
```javascript
myAppModule.run(['uiSelect2Config', function(uiSelect2Config) {
uiSelect2Config.placeholder = "Placeholder text";
}]);
```
## Working with ng-model
The ui-select2 directive plays nicely with ng-model and validation directives such as ng-required.
If you add the ng-model directive to same the element as ui-select2 then the picked option is automatically synchronized with the model value.
## Working with dynamic options
`ui-select2` is incompatible with `<select ng-options>`. For the best results use `<option ng-repeat>` instead.
```html
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<option value=""></option>
<option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
</select>
```
## Working with placeholder text
In order to properly support the Select2 placeholder, create an empty `<option>` tag at the top of the `<select>` and either set a `data-placeholder` on the select element or pass a `placeholder` option to Select2.
```html
<select ui-select2 ng-model="number" data-placeholder="Pick a number">
<option value=""></option>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
```
## ng-required directive
If you apply the required directive to element then the form element is invalid until an option is selected.
Note: Remember that the ng-required directive must be explicitly set, i.e. to "true". This is especially true on divs:
```html
<select ui-select2 ng-model="number" data-placeholder="Pick a number" ng-required="true">
<option value=""></option>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
```
## Using simple tagging mode
When AngularJS View-Model tags are stored as a list of strings, setting
the ui-select2 specific option `simple_tags` will allow to keep the model
as a list of strings, and not convert it into a list of Select2 tag objects.
```html
<input
type="hidden"
ui-select2="select2Options"
ng-model="list_of_string"
>
```
```javascript
myAppModule.controller('MyController', function($scope) {
$scope.list_of_string = ['tag1', 'tag2']
$scope.select2Options = {
'multiple': true,
'simple_tags': true,
'tags': ['tag1', 'tag2', 'tag3', 'tag4'] // Can be empty list.
};
});
```

View File

@ -0,0 +1,20 @@
{
"author": "AngularUI",
"name": "angular-ui-select2",
"version": "0.0.5",
"homepage": "http://angular-ui.github.com",
"keywords": [
"angular",
"angularui",
"select2"
],
"main": "./src/select2.js",
"dependencies": {
"angular": ">=1.2.0",
"select2": "~3.4",
"jquery": ">=1.6.4"
},
"devDependencies": {
"angular-mocks": ">=1.0.2"
}
}

View File

@ -0,0 +1,114 @@
var app = angular.module('angular-ui-select2-demo', ['ui.select2']);
app.controller('MainCtrl', function ($scope, $element) {
var states = [
{ text: 'Alaskan/Hawaiian Time Zone', children: [
{ id: 'AK', text: 'Alaska' },
{ id: 'HI', text: 'Hawaii' }
]},
{ text: 'Pacific Time Zone', children: [
{ id: 'CA', text: 'California' },
{ id: 'NV', text: 'Nevada' },
{ id: 'OR', text: 'Oregon' },
{ id: 'WA', text: 'Washington' }
]},
{ text: 'Mountain Time Zone', children: [
{ id: 'AZ', text: 'Arizona' },
{ id: 'CO', text: 'Colorado' },
{ id: 'ID', text: 'Idaho' },
{ id: 'MT', text: 'Montana' },
{ id: 'NE', text: 'Nebraska' },
{ id: 'NM', text: 'New Mexico' },
{ id: 'ND', text: 'North Dakota' },
{ id: 'UT', text: 'Utah' },
{ id: 'WY', text: 'Wyoming' }
]},
{ text: 'Central Time Zone', children: [
{ id: 'AL', text: 'Alabama' },
{ id: 'AR', text: 'Arkansas' },
{ id: 'IL', text: 'Illinois' },
{ id: 'IA', text: 'Iowa' },
{ id: 'KS', text: 'Kansas' },
{ id: 'KY', text: 'Kentucky' },
{ id: 'LA', text: 'Louisiana' },
{ id: 'MN', text: 'Minnesota' },
{ id: 'MS', text: 'Mississippi' },
{ id: 'MO', text: 'Missouri' },
{ id: 'OK', text: 'Oklahoma' },
{ id: 'SD', text: 'South Dakota' },
{ id: 'TX', text: 'Texas' },
{ id: 'TN', text: 'Tennessee' },
{ id: 'WI', text: 'Wisconsin' }
]},
{ text: 'Eastern Time Zone', children: [
{ id: 'CT', text: 'Connecticut' },
{ id: 'DE', text: 'Delaware' },
{ id: 'FL', text: 'Florida' },
{ id: 'GA', text: 'Georgia' },
{ id: 'IN', text: 'Indiana' },
{ id: 'ME', text: 'Maine' },
{ id: 'MD', text: 'Maryland' },
{ id: 'MA', text: 'Massachusetts' },
{ id: 'MI', text: 'Michigan' },
{ id: 'NH', text: 'New Hampshire' },
{ id: 'NJ', text: 'New Jersey' },
{ id: 'NY', text: 'New York' },
{ id: 'NC', text: 'North Carolina' },
{ id: 'OH', text: 'Ohio' },
{ id: 'PA', text: 'Pennsylvania' },
{ id: 'RI', text: 'Rhode Island' },
{ id: 'SC', text: 'South Carolina' },
{ id: 'VT', text: 'Vermont' },
{ id: 'VA', text: 'Virginia' },
{ id: 'WV', text: 'West Virginia' }
]}
];
function findState(id) {
for (var i=0; i<states.length; i++) {
for (var j=0; j<states[i].children.length; j++) {
if (states[i].children[j].id == id) {
return states[i].children[j];
}
}
}
}
$scope.multi2Value = ['CO', 'WA'];
$scope.multi = {
multiple: true,
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val'),
results = [];
for (var i=0; i<val.length; i++) {
results.push(findState(val[i]));
}
callback(results);
}
};
$scope.placeholders = {
placeholder: "Select a State"
};
$scope.array = {
data: [{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
};
$scope.arrayAsync = {
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val');
return callback(findState(val));
}
};
});

View File

@ -0,0 +1,11 @@
{
"name": "angular-ui-select2-demo",
"main": "./index.html",
"dependencies": {
"angular": ">=1.2.0",
"select2": "~3.4",
"jquery": ">=1.6.4",
"bootstrap": "~3.0.3",
"angular-ui-select2": "~0.0.5"
}
}

View File

@ -0,0 +1,225 @@
<!DOCTYPE html>
<html ng-app="angular-ui-select2-demo">
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/select2/select2.css">
<style>
.container {
padding-bottom: 4em;
}
h2 {
border-bottom: 1px solid #ddd;
margin-top: 2em;
}
h3 {
font-size: 16px;
font-weight: normal;
margin-top: 0.2em;
}
.select2-container {
}
label {
font-size: 16px;
font-weight: normal;
display: block;
color: #333;
}
.example.row {
margin-top: 1em;
}
</style>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="app.js"></script>
<script>
$(function() {
var opts=$('#source').html(), opts2='<option></option>'+opts;
$('select.populate').each(function() { var e=$(this); e.html(e.hasClass('placeholder')?opts2:opts); });
});
</script>
</head>
<body>
<div class="container" ng-controller="MainCtrl">
<article class="row" id="basics">
<h2>The Basics</h2>
<div class="example row">
<div class="col-md-4 left">
<label>&lt;select&gt;</label>
<select style="width:300px" ui-select2 ng-model="basicsValue" id="source">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ basicsValue }}</pre>
</div>
</div>
</article>
<article class="row" id="multi">
<h2>Multi-Value</h2>
<div class="example row">
<div class="col-md-4 left">
<label>&lt;select multiple&gt;</label>
<select style="width:300px" ui-select2 multiple ng-model="multiValue" class="populate"></select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ multiValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Pre-defined value</label>
<input type="hidden" style="width:300px" ui-select2="multi" ng-model="multi2Value"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{
multiple: true,
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val'),
results = [];
for (var i=0; i&lt;val.length; i++) {
results.push(findState(val[i]));
}
callback(results);
}
}</code></pre>
<h3>Value</h3>
<pre>{{ multi2Value }}</pre>
</div>
</div>
</article>
<article class="row" id="placeholders">
<h2>Placeholders</h2>
<div class="example row">
<div class="col-md-4 left">
<label>Using data-attribute</label>
<select style="width:300px" ui-select2 ng-model="placeholdersValue" class="populate placeholder" data-placeholder="Select a State"></select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ placeholdersValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Multiple, using config</label>
<select style="width:300px" ui-select2="placeholders" multiple ng-model="placeholdersMultiValue" class="populate"></select>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{{ placeholders }}</code></pre>
<h3>Value</h3>
<pre>{{ placeholdersMultiValue }}</pre>
</div>
</div>
</article>
<article class="row" id="array">
<h2>Array Data</h2>
<div class="example row">
<div class="col-md-4 left">
<label>Simple</label>
<input type="hidden" style="width:300px" ui-select2="array" ng-model="arrayValue"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{{ array }}</code></pre>
<h3>Value</h3>
<pre>{{ arrayValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Asynchronous</label>
<input type="hidden" style="width:300px" ui-select2="arrayAsync" ng-model="arrayAsyncValue"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val');
return callback(findState(val));
}
}</code></pre>
<h3>Value</h3>
<pre>{{ arrayAsyncValue }}</pre>
</div>
</div>
</article>
</div>
</body>
</html>

View File

@ -0,0 +1,47 @@
<section id="directives-select2">
<div class="page-header">
<h1>Select2</h1>
<small><a href="http://ivaynberg.github.com/select2/">Select2</a> is inspired by <a href="http://harvesthq.github.com/chosen">Chosen</a></small>
</div>
<div class="row">
<div class="span6">
<h3>Demo</h3>
<div class="well">
<p>Value is: {{select2}} <a ng-click="select2='two'">(choose second)</a></p>
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<option value=""></option>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
</div>
<div class="well">
<p>Value is: {{select2multiple}} <a ng-click="select2multiple=['two']">(choose second)</a></p>
<select ui-select2 ng-model="select2multiple" data-placeholder="Pick a number" multiple>
<option value="one">First</option>
<option value="two">Second</option>
<option value="three">Third</option>
</select>
</div>
</div>
<div class="span6">
<h3>Options</h3>
<p>You can pass an object to Select2 as the expression: <code>ui-select2="{allowClear:true}"</code> that will be passed directly to <code>$.fn.select2()</code>. You can read more about the supported list of options and what they do on the <a href="http://ivaynberg.github.com/select2/">Select2 Documentation Page</a>. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.</p>
</div>
</div>
<p class="alert alert-info"><i class="icon-info-sign"></i> <code>ui-select2</code> is incompatible with <code>&lt;select ng-options&gt;</code>. For the best results use <code>&lt;option ng-repeat&gt;</code> instead</p>
<p class="alert alert-info"><i class="icon-info-sign"></i> In order to properly support the Select2 placeholder, create an empty <code>&lt;option&gt;</code> tag at the top of the <code>&lt;select&gt;</code> and either set a <code>data-placeholder</code> on the select element or pass a <code>placeholder</code> option to Select2.</p>
<h3>How?</h3>
<pre class="prettyprint linenums" ng-non-bindable>
&lt;p&gt;Value is: {{select2}} &lt;a ng-click=&quot;select2=&#x27;two&#x27;&quot;&gt;(choose second)&lt;/a&gt;&lt;/p&gt;
&lt;select ui-select2 ng-model=&quot;select2&quot;&gt;
&lt;option value=&quot;&quot;&gt;Pick a number&lt;/option&gt;
&lt;option value=&quot;one&quot;&gt;First&lt;/option&gt;
&lt;option value=&quot;two&quot;&gt;Second&lt;/option&gt;
&lt;option value=&quot;three&quot;&gt;Third&lt;/option&gt;
&lt;/select&gt;
</pre>
<p>Or try playing around with this <a href="http://plnkr.co/edit/gist:4279651?p=preview">sandbox demo</a> to see how AJAX works</p>
</section>

View File

@ -0,0 +1,4 @@
#directives-select2 select {
width: 200px;
}

View File

@ -0,0 +1,30 @@
{
"author": "https://github.com/angular-ui/ui-select2/graphs/contributors",
"name": "angular-ui-select2",
"keywords": [
"angular",
"angularui",
"select2"
],
"description": "AngularUI - The companion suite for AngularJS",
"version": "0.0.5",
"homepage": "http://angular-ui.github.com",
"repository": {
"type": "git",
"url": "git://github.com/angular-ui/ui-select2.git"
},
"engines": {
"node": ">= 0.8.4"
},
"dependencies": {},
"devDependencies": {
"async": "0.1.x",
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-watch": "~0.5.3",
"grunt-karma": "~0.6.2",
"karma": "~0.10.2",
"grunt-conventional-changelog": "~1.0.0",
"load-grunt-tasks": "~0.2.0"
}
}

View File

@ -0,0 +1,238 @@
/**
* Enhanced Select2 Dropmenus
*
* @AJAX Mode - When in this mode, your value will be an object (or array of objects) of the data used by Select2
* This change is so that you do not have to do an additional query yourself on top of Select2's own query
* @params [options] {object} The configuration options passed to $.fn.select2(). Refer to the documentation
*/
angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelect2', ['uiSelect2Config', '$timeout', function (uiSelect2Config, $timeout) {
var options = {};
if (uiSelect2Config) {
angular.extend(options, uiSelect2Config);
}
return {
require: 'ngModel',
priority: 1,
compile: function (tElm, tAttrs) {
var watch,
repeatOption,
repeatAttr,
isSelect = tElm.is('select'),
isMultiple = angular.isDefined(tAttrs.multiple);
// Enable watching of the options dataset if in use
if (tElm.is('select')) {
repeatOption = tElm.find( 'optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]');
if (repeatOption.length) {
repeatAttr = repeatOption.attr('ng-repeat') || repeatOption.attr('data-ng-repeat');
watch = jQuery.trim(repeatAttr.split('|')[0]).split(' ').pop();
}
}
return function (scope, elm, attrs, controller) {
// instance-specific options
var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2));
/*
Convert from Select2 view-model to Angular view-model.
*/
var convertToAngularModel = function(select2_data) {
var model;
if (opts.simple_tags) {
model = [];
angular.forEach(select2_data, function(value, index) {
model.push(value.id);
});
} else {
model = select2_data;
}
return model;
};
/*
Convert from Angular view-model to Select2 view-model.
*/
var convertToSelect2Model = function(angular_data) {
var model = [];
if (!angular_data) {
return model;
}
if (opts.simple_tags) {
model = [];
angular.forEach(
angular_data,
function(value, index) {
model.push({'id': value, 'text': value});
});
} else {
model = angular_data;
}
return model;
};
if (isSelect) {
// Use <select multiple> instead
delete opts.multiple;
delete opts.initSelection;
} else if (isMultiple) {
opts.multiple = true;
}
if (controller) {
// Watch the model for programmatic changes
scope.$watch(tAttrs.ngModel, function(current, old) {
if (!current) {
return;
}
if (current === old) {
return;
}
controller.$render();
}, true);
controller.$render = function () {
if (isSelect) {
elm.select2('val', controller.$viewValue);
} else {
if (opts.multiple) {
controller.$isEmpty = function (value) {
return !value || value.length === 0;
};
var viewValue = controller.$viewValue;
if (angular.isString(viewValue)) {
viewValue = viewValue.split(',');
}
elm.select2(
'data', convertToSelect2Model(viewValue));
if (opts.sortable) {
elm.select2("container").find("ul.select2-choices").sortable({
containment: 'parent',
start: function () {
elm.select2("onSortStart");
},
update: function () {
elm.select2("onSortEnd");
elm.trigger('change');
}
});
}
} else {
if (angular.isObject(controller.$viewValue)) {
elm.select2('data', controller.$viewValue);
} else if (!controller.$viewValue) {
elm.select2('data', null);
} else {
elm.select2('val', controller.$viewValue);
}
}
}
};
// Watch the options dataset for changes
if (watch) {
scope.$watch(watch, function (newVal, oldVal, scope) {
if (angular.equals(newVal, oldVal)) {
return;
}
// Delayed so that the options have time to be rendered
$timeout(function () {
elm.select2('val', controller.$viewValue);
// Refresh angular to remove the superfluous option
controller.$render();
if(newVal && !oldVal && controller.$setPristine) {
controller.$setPristine(true);
}
});
});
}
// Update valid and dirty statuses
controller.$parsers.push(function (value) {
var div = elm.prev();
div
.toggleClass('ng-invalid', !controller.$valid)
.toggleClass('ng-valid', controller.$valid)
.toggleClass('ng-invalid-required', !controller.$valid)
.toggleClass('ng-valid-required', controller.$valid)
.toggleClass('ng-dirty', controller.$dirty)
.toggleClass('ng-pristine', controller.$pristine);
return value;
});
if (!isSelect) {
// Set the view and model value and update the angular template manually for the ajax/multiple select2.
elm.bind("change", function (e) {
e.stopImmediatePropagation();
if (scope.$$phase || scope.$root.$$phase) {
return;
}
scope.$apply(function () {
controller.$setViewValue(
convertToAngularModel(elm.select2('data')));
});
});
if (opts.initSelection) {
var initSelection = opts.initSelection;
opts.initSelection = function (element, callback) {
initSelection(element, function (value) {
var isPristine = controller.$pristine;
controller.$setViewValue(convertToAngularModel(value));
callback(value);
if (isPristine) {
controller.$setPristine();
}
elm.prev().toggleClass('ng-pristine', controller.$pristine);
});
};
}
}
}
elm.bind("$destroy", function() {
elm.select2("destroy");
});
attrs.$observe('disabled', function (value) {
elm.select2('enable', !value);
});
attrs.$observe('readonly', function (value) {
elm.select2('readonly', !!value);
});
if (attrs.ngMultiple) {
scope.$watch(attrs.ngMultiple, function(newVal) {
attrs.$set('multiple', !!newVal);
elm.select2(opts);
});
}
// Initialize the plugin late so that the injected DOM does not disrupt the template compiler
$timeout(function () {
elm.select2(opts);
// Set initial value - I'm not sure about this but it seems to need to be there
elm.select2('data', controller.$modelValue);
// important!
controller.$render();
// Not sure if I should just check for !isSelect OR if I should check for 'tags' key
if (!opts.initSelection && !isSelect) {
var isPristine = controller.$pristine;
controller.$pristine = false;
controller.$setViewValue(
convertToAngularModel(elm.select2('data'))
);
if (isPristine) {
controller.$setPristine();
}
elm.prev().toggleClass('ng-pristine', controller.$pristine);
}
});
};
}
};
}]);

View File

@ -0,0 +1,80 @@
// Karma configuration
// Generated on Tue Sep 17 2013 06:59:46 GMT-0400 (EDT)
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '..',
// frameworks to use
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
// Dependencies
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/select2/select2.js',
// Source Code
'src/select2.js',
// Test Specs
'test/*Spec.js'
],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome', 'Firefox'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};

View File

@ -0,0 +1,411 @@
// a helper directive for injecting formatters and parsers
angular.module('ui.select2').directive('injectTransformers', [ function () {
return {
restrict: 'A',
require: 'ngModel',
priority: -1,
link: function (scope, element, attr, ngModel) {
var local = scope.$eval(attr.injectTransformers);
if (!angular.isObject(local) || !angular.isFunction(local.fromModel) || !angular.isFunction(local.fromElement)) {
throw "The injectTransformers directive must be bound to an object with two functions (`fromModel` and `fromElement`)";
}
ngModel.$parsers.push(local.fromElement);
ngModel.$formatters.push(local.fromModel);
}
};
}]);
/*global describe, beforeEach, module, inject, it, spyOn, expect, $ */
describe('uiSelect2', function () {
'use strict';
var scope, $compile, options, $timeout;
beforeEach(module('ui.select2'));
beforeEach(inject(function (_$rootScope_, _$compile_, _$window_, _$timeout_) {
scope = _$rootScope_.$new();
$compile = _$compile_;
$timeout = _$timeout_;
scope.options = {
query: function (query) {
var data = {
results: [{ id: 1, text: 'first' }]
};
query.callback(data);
}
};
scope.transformers = {
fromModel: function (modelValue) {
if (!modelValue) {
return modelValue;
}
if (angular.isArray(modelValue)) {
return modelValue.map(function (val) {
val.text += " - I've been formatted";
return val;
});
}
if (angular.isObject(modelValue)) {
modelValue.text += " - I've been formatted";
return modelValue;
}
return modelValue + " - I've been formatted";
},
fromElement: function (elementValue) {
var suffix = " - I've been formatted";
if (!elementValue) {
return elementValue;
}
if (angular.isArray(elementValue)) {
return elementValue.map(function (val) {
val.text += val.text.slice(0, val.text.indexOf(" - I've been formatted"));
return val;
});
}
if (angular.isObject(elementValue)) {
elementValue.text = elementValue.text.slice(0, elementValue.text.indexOf(suffix));
return elementValue;
}
if (elementValue) {
return elementValue.slice(0, elementValue.indexOf(suffix));
}
return undefined;
}
};
}));
/**
* Compile a template synchronously
* @param {String} template The string to compile
* @return {Object} A reference to the compiled template
*/
function compile(template) {
var element = $compile(template)(scope);
scope.$apply();
$timeout.flush();
return element;
}
describe('with a <select> element', function () {
describe('compiling this directive', function () {
it('should throw an error if we have no model defined', function () {
expect(function(){
compile('<select type="text" ui-select2></select>');
}).toThrow();
});
it('should create proper DOM structure', function () {
var element = compile('<select ui-select2 ng-model="foo"></select>');
expect(element.siblings().is('div.select2-container')).toBe(true);
});
it('should not modify the model if there is no initial value', function(){
//TODO
});
});
describe('when model is changed programmatically', function(){
describe('for single select', function(){
it('should set select2 to the value', function(){
scope.foo = 'First';
var element = compile('<select ui-select2 ng-model="foo"><option>First</option><option>Second</option></select>');
expect(element.select2('val')).toBe('First');
scope.$apply('foo = "Second"');
expect(element.select2('val')).toBe('Second');
});
it('should handle falsey values', function(){
scope.foo = 'First';
var element = compile('<select ui-select2="{allowClear:true}" ng-model="foo"><option>First</option><option>Second</option></select>');
expect(element.select2('val')).toBe('First');
scope.$apply('foo = false');
expect(element.select2('val')).toBe(null);
scope.$apply('foo = "Second"');
scope.$apply('foo = null');
expect(element.select2('val')).toBe(null);
scope.$apply('foo = "Second"');
scope.$apply('foo = undefined');
expect(element.select2('val')).toBe(null);
});
});
describe('for multiple select', function(){
it('should set select2 to multiple value', function(){
scope.foo = ['First'];
var element = compile('<select ui-select2="{allowClear:true}" multiple ng-model="foo"><option>First</option><option>Second</option><option>Third</option></select>');
expect(element.select2('val')).toEqual(['First']);
scope.$apply('foo = ["Second"]');
expect(element.select2('val')).toEqual(['Second']);
scope.$apply('foo = ["Second","Third"]');
expect(element.select2('val')).toEqual(['Second','Third']);
});
it('should handle falsey values', function(){
scope.foo = ['First'];
var element = compile('<select ui-select2="{allowClear:true}" multiple ng-model="foo"><option>First</option><option>Second</option><option>Third</option></select>');
expect(element.val()).toEqual(['First']);
scope.$apply('foo = ["Second"]');
scope.$apply('foo = false');
expect(element.select2('val')).toEqual([]);
scope.$apply('foo = ["Second"]');
scope.$apply('foo = null');
expect(element.select2('val')).toEqual([]);
scope.$apply('foo = ["Second"]');
scope.$apply('foo = undefined');
expect(element.select2('val')).toEqual([]);
});
});
});
it('should observe the disabled attribute', function () {
var element = compile('<select ui-select2 ng-model="foo" ng-disabled="disabled"></select>');
expect(element.siblings().hasClass('select2-container-disabled')).toBe(false);
scope.$apply('disabled = true');
expect(element.siblings().hasClass('select2-container-disabled')).toBe(true);
scope.$apply('disabled = false');
expect(element.siblings().hasClass('select2-container-disabled')).toBe(false);
});
it('should observe the multiple attribute', function () {
var element = $compile('<select ui-select2 ng-model="foo" ng-multiple="multiple"></select>')(scope);
expect(element.siblings().hasClass('select2-container-multi')).toBe(false);
scope.$apply('multiple = true');
expect(element.siblings().hasClass('select2-container-multi')).toBe(true);
scope.$apply('multiple = false');
expect(element.siblings().hasClass('select2-container-multi')).toBe(false);
});
it('should observe an option with ng-repeat for changes', function(){
scope.items = ['first', 'second', 'third'];
scope.foo = 'fourth';
var element = compile('<select ui-select2 ng-model="foo"><option ng-repeat="item in items">{{item}}</option></select>');
expect(element.select2('val')).toBe(null);
scope.$apply('foo="fourth";items=["fourth"]');
$timeout.flush();
expect(element.select2('val')).toBe('fourth');
});
});
describe('with an <input> element', function () {
describe('compiling this directive', function () {
it('should throw an error if we have no model defined', function () {
expect(function() {
compile('<input ui-select2/>');
}).toThrow();
});
it('should create proper DOM structure', function () {
var element = compile('<input ui-select2="options" ng-model="foo"/>');
expect(element.siblings().is('div.select2-container')).toBe(true);
});
it('should not modify the model if there is no initial value', function(){
//TODO
});
});
describe('when model is changed programmatically', function(){
describe('for single-select', function(){
it('should call select2(data, ...) for objects', function(){
var element = compile('<input ng-model="foo" ui-select2="options">');
spyOn($.fn, 'select2');
scope.$apply('foo={ id: 1, text: "first" }');
expect(element.select2).toHaveBeenCalledWith('data', { id: 1, text: "first" });
});
it('should call select2(val, ...) for strings', function(){
var element = compile('<input ng-model="foo" ui-select2="options">');
spyOn($.fn, 'select2');
scope.$apply('foo="first"');
expect(element.select2).toHaveBeenCalledWith('val', 'first');
});
});
describe('for multi-select', function(){
it('should call select2(data, ...) for arrays', function(){
var element = compile('<input ng-model="foo" multiple ui-select2="options">');
spyOn($.fn, 'select2');
scope.$apply('foo=[{ id: 1, text: "first" },{ id: 2, text: "second" }]');
expect(element.select2).toHaveBeenCalledWith('data', [{ id: 1, text: "first" },{ id: 2, text: "second" }]);
});
it('should call select2(data, []) for falsey values', function(){
var element = compile('<input ng-model="foo" multiple ui-select2="options">');
spyOn($.fn, 'select2');
scope.$apply('foo=[]');
expect(element.select2).toHaveBeenCalledWith('data', []);
});
xit('should call select2(val, ...) for strings', function(){
var element = compile('<input ng-model="foo" multiple ui-select2="options">');
spyOn($.fn, 'select2');
scope.$apply('foo="first,second"');
expect(element.select2).toHaveBeenCalledWith('val', 'first,second');
});
});
});
describe('consumers of ngModel should correctly use $viewValue', function() {
it('should use any formatters if present (select - single select)', function(){
scope.foo = 'First';
var element = compile('<select ui-select2 ng-model="foo" inject-transformers="transformers"><option>First - I\'ve been formatted</option><option>Second - I\'ve been formatted</option></select>');
expect(element.select2('val')).toBe('First - I\'ve been formatted');
scope.$apply('foo = "Second"');
expect(element.select2('val')).toBe('Second - I\'ve been formatted');
});
// isMultiple && falsey
it('should use any formatters if present (input multi select - falsey value)', function() {
// need special function to hit this case
// old code checked modelValue... can't just pass undefined to model value because view value will be the same
scope.transformers.fromModel = function(modelValue) {
if (modelValue === "magic") {
return undefined;
}
return modelValue;
};
var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
spyOn($.fn, 'select2');
scope.$apply('foo="magic"');
expect(element.select2).toHaveBeenCalledWith('data', []);
});
// isMultiple && isArray
it('should use any formatters if present (input multi select)', function() {
var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
spyOn($.fn, 'select2');
scope.$apply('foo=[{ id: 1, text: "first" },{ id: 2, text: "second" }]');
expect(element.select2).toHaveBeenCalledWith('data', [{ id: 1, text: "first - I've been formatted" },{ id: 2, text: "second - I've been formatted" }]);
});
// isMultiple...
xit('should use any formatters if present (input multi select - non array)', function() {
var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
spyOn($.fn, 'select2');
scope.$apply('foo={ id: 1, text: "first" }');
expect(element.select2).toHaveBeenCalledWith('val', { id: 1, text: "first - I've been formatted" });
});
// !isMultiple
it('should use any formatters if present (input - single select - object)', function() {
var element = compile('<input ng-model="foo" ui-select2="options" inject-transformers="transformers">');
spyOn($.fn, 'select2');
scope.$apply('foo={ id: 1, text: "first" }');
expect(element.select2).toHaveBeenCalledWith('data', { id: 1, text: "first - I've been formatted" });
});
it('should use any formatters if present (input - single select - non object)', function() {
var element = compile('<input ng-model="foo" ui-select2="options" inject-transformers="transformers">');
spyOn($.fn, 'select2');
scope.$apply('foo="first"');
expect(element.select2).toHaveBeenCalledWith('val', "first - I've been formatted");
});
it('should not set the default value using scope.$eval', function() {
// testing directive instantiation - change order of test
spyOn($.fn, 'select2');
spyOn($.fn, 'val');
scope.$apply('foo=[{ id: 1, text: "first" },{ id: 2, text: "second" }]');
var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
expect(element.val).not.toHaveBeenCalledWith([{ id: 1, text: "first" },{ id: 2, text: "second" }]);
});
it('should expect a default value to be set with a call to the render method', function() {
// this should monitor the events after init, when the timeout callback executes
var opts = angular.copy(scope.options);
opts.multiple = true;
scope.$apply('foo=[{ id: 1, text: "first" },{ id: 2, text: "second" }]');
spyOn($.fn, 'select2');
var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
// select 2 init
expect(element.select2).toHaveBeenCalledWith(opts);
// callback setting
expect(element.select2).toHaveBeenCalledWith('data', [{ id: 1, text: "first - I've been formatted" },{ id: 2, text: "second - I've been formatted" }]);
// retieve data
expect(element.select2).toHaveBeenCalledWith('data');
});
});
it('should set the model when the user selects an item', function(){
var element = compile('<input ng-model="foo" multiple ui-select2="options">');
// TODO: programmactically select an option
// expect(scope.foo).toBe(/* selected val */) ;
});
it('updated the view when model changes with complex object', function(){
scope.foo = [{'id': '0', 'text': '0'}];
scope.options['multiple'] = true;
var element = compile('<input ng-model="foo" ui-select2="options">');
scope.$digest();
scope.foo.push({'id': '1', 'text': '1'});
scope.$digest();
expect(element.select2('data')).toEqual(
[{'id': '0', 'text': '0'}, {'id': '1', 'text': '1'}]);
});
describe('simple_tags', function() {
beforeEach(function() {
scope.options['multiple'] = true;
scope.options['simple_tags'] = true;
scope.options['tags'] = [];
});
it('Initialize the select2 view based on list of strings.', function() {
scope.foo = ['tag1', 'tag2'];
var element = compile('<input ng-model="foo" ui-select2="options">');
scope.$digest();
expect(element.select2('data')).toEqual([
{'id': 'tag1', 'text': 'tag1'},
{'id': 'tag2', 'text': 'tag2'}
]);
});
it(
'When list is empty select2 view model is also initialized as empty',
function() {
scope.foo = [];
var element = compile('<input ng-model="foo" ui-select2="options">');
scope.$digest();
expect(element.select2('data')).toEqual([]);
});
it(
'Updating the model with a string will update the select2 view model.',
function() {
scope.foo = [];
var element = compile('<input ng-model="foo" ui-select2="options">');
scope.$digest();
scope.foo.push('tag1');
scope.$digest();
expect(element.select2('data')).toEqual([
{'id': 'tag1', 'text': 'tag1'}
]);
});
it(
'Updating the select2 model will update AngularJS model with a string.',
function() {
scope.foo = [];
var element = compile('<input ng-model="foo" ui-select2="options">');
scope.$digest();
element.select2('data', [
{'id':'tag1', 'text': 'tag1'},
{'id':'tag2', 'text': 'tag2'}
]);
element.trigger('change');
expect(scope.foo).toEqual(['tag1', 'tag2']);
});
});
});
});

View File

@ -25,6 +25,8 @@
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<!-- Animate Css -->
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<!-- Select2 css -->
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.css">
<!-- Clip-Two CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/plugins.css">
@ -65,6 +67,9 @@
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<!-- Angular Scroll -->
<script src="bower_components/angular-scroll/angular-scroll.min.js"></script>
<!-- Angular select2 -->
<script type="text/javascript" src="bower_components/select2/dist/js/select2.js"></script>
<script type="text/javascript" src="bower_components/ui-select2-master/src/select2.js"></script>
<!-- Clip-Two Scripts -->
<script src="assets/js/app.js"></script>