You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add the select2 module as a dependency to your application module:
48
+
49
+
```javascript
50
+
var myAppModule =angular.module('MyApp', ['ui.select2']);
51
+
```
52
+
53
+
Apply the directive to your form elements:
54
+
55
+
```html
56
+
<selectui-select2ng-model="select2"data-placeholder="Pick a number">
57
+
<optionvalue=""></option>
58
+
<optionvalue="one">First</option>
59
+
<optionvalue="two">Second</option>
60
+
<optionvalue="three">Third</option>
61
+
</select>
62
+
```
63
+
64
+
## Options
65
+
66
+
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/)
The ui-select2 directive plays nicely with ng-model and validation directives such as ng-required.
97
+
98
+
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.
99
+
100
+
## Working with dynamic options
101
+
`ui-select2` is incompatible with `<select ng-options>`. For the best results use `<option ng-repeat>` instead.
102
+
```html
103
+
<selectui-select2ng-model="select2"data-placeholder="Pick a number">
104
+
<optionvalue=""></option>
105
+
<optionng-repeat="{{number in range}}"value="{{number.value}}">{{number.text}}</option>
106
+
</select>
107
+
```
108
+
109
+
## Working with placeholder text
110
+
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.
111
+
```html
112
+
<selectui-select2ng-model="number"data-placeholder="Pick a number">
113
+
<optionvalue=""></option>
114
+
<optionvalue="one">First</option>
115
+
<optionvalue="two">Second</option>
116
+
<optionvalue="three">Third</option>
117
+
</select>
118
+
```
119
+
120
+
## ng-required directive
121
+
122
+
If you apply the required directive to element then the form element is invalid until an option is selected.
123
+
124
+
Note: Remember that the ng-required directive must be explicitly set, i.e. to "true". This is especially true on divs:
20
125
21
-
??
126
+
```html
127
+
<selectui-select2ng-model="number"data-placeholder="Pick a number"ng-required="true">
0 commit comments