├── style └── style.css ├── README.md ├── index.html └── js └── app.js /style/style.css: -------------------------------------------------------------------------------- 1 | .chosen-choices, .chosen-container { 2 | width: 500px !important; 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-chosen 2 | ============== 3 | 4 | This project shows the integration of AngularJS and the Chosen plugin. 5 | 6 | 2013-06-20 Updated to show how to pre-select 7 | 8 | 2014-09-10 Updated to latest chosen and angular and add ability to clear select -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
- {{state.name}}, {{state.abbreviation}}
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | angular.module('Chosen', []) 2 | .controller('MainCtrl', function(STATES) { 3 | var main = this; 4 | 5 | main.clearSelect = function() { 6 | main.states = []; 7 | } 8 | 9 | main.allStates = STATES; 10 | main.states = []; 11 | main.states.push(STATES[0]); 12 | main.states.push(STATES[1]); 13 | }) 14 | .directive('chosen', function() { 15 | var linker = function(scope, element, attr) { 16 | // update the select when data is loaded 17 | scope.$watch(attr.chosen, function(oldVal, newVal) { 18 | element.trigger('chosen:updated'); 19 | }); 20 | 21 | // update the select when the model changes 22 | scope.$watch(attr.ngModel, function() { 23 | element.trigger('chosen:updated'); 24 | }); 25 | 26 | element.chosen(); 27 | }; 28 | 29 | return { 30 | restrict: 'A', 31 | link: linker 32 | }; 33 | }) 34 | .constant('STATES', 35 | [ 36 | { 37 | "name": "Alabama", 38 | "abbreviation": "AL" 39 | }, 40 | { 41 | "name": "Alaska", 42 | "abbreviation": "AK" 43 | }, 44 | { 45 | "name": "American Samoa", 46 | "abbreviation": "AS" 47 | }, 48 | { 49 | "name": "Arizona", 50 | "abbreviation": "AZ" 51 | }, 52 | { 53 | "name": "Arkansas", 54 | "abbreviation": "AR" 55 | }, 56 | { 57 | "name": "California", 58 | "abbreviation": "CA" 59 | }, 60 | { 61 | "name": "Colorado", 62 | "abbreviation": "CO" 63 | }, 64 | { 65 | "name": "Connecticut", 66 | "abbreviation": "CT" 67 | }, 68 | { 69 | "name": "Delaware", 70 | "abbreviation": "DE" 71 | }, 72 | { 73 | "name": "District Of Columbia", 74 | "abbreviation": "DC" 75 | }, 76 | { 77 | "name": "Federated States Of Micronesia", 78 | "abbreviation": "FM" 79 | }, 80 | { 81 | "name": "Florida", 82 | "abbreviation": "FL" 83 | }, 84 | { 85 | "name": "Georgia", 86 | "abbreviation": "GA" 87 | }, 88 | { 89 | "name": "Guam", 90 | "abbreviation": "GU" 91 | }, 92 | { 93 | "name": "Hawaii", 94 | "abbreviation": "HI" 95 | }, 96 | { 97 | "name": "Idaho", 98 | "abbreviation": "ID" 99 | }, 100 | { 101 | "name": "Illinois", 102 | "abbreviation": "IL" 103 | }, 104 | { 105 | "name": "Indiana", 106 | "abbreviation": "IN" 107 | }, 108 | { 109 | "name": "Iowa", 110 | "abbreviation": "IA" 111 | }, 112 | { 113 | "name": "Kansas", 114 | "abbreviation": "KS" 115 | }, 116 | { 117 | "name": "Kentucky", 118 | "abbreviation": "KY" 119 | }, 120 | { 121 | "name": "Louisiana", 122 | "abbreviation": "LA" 123 | }, 124 | { 125 | "name": "Maine", 126 | "abbreviation": "ME" 127 | }, 128 | { 129 | "name": "Marshall Islands", 130 | "abbreviation": "MH" 131 | }, 132 | { 133 | "name": "Maryland", 134 | "abbreviation": "MD" 135 | }, 136 | { 137 | "name": "Massachusetts", 138 | "abbreviation": "MA" 139 | }, 140 | { 141 | "name": "Michigan", 142 | "abbreviation": "MI" 143 | }, 144 | { 145 | "name": "Minnesota", 146 | "abbreviation": "MN" 147 | }, 148 | { 149 | "name": "Mississippi", 150 | "abbreviation": "MS" 151 | }, 152 | { 153 | "name": "Missouri", 154 | "abbreviation": "MO" 155 | }, 156 | { 157 | "name": "Montana", 158 | "abbreviation": "MT" 159 | }, 160 | { 161 | "name": "Nebraska", 162 | "abbreviation": "NE" 163 | }, 164 | { 165 | "name": "Nevada", 166 | "abbreviation": "NV" 167 | }, 168 | { 169 | "name": "New Hampshire", 170 | "abbreviation": "NH" 171 | }, 172 | { 173 | "name": "New Jersey", 174 | "abbreviation": "NJ" 175 | }, 176 | { 177 | "name": "New Mexico", 178 | "abbreviation": "NM" 179 | }, 180 | { 181 | "name": "New York", 182 | "abbreviation": "NY" 183 | }, 184 | { 185 | "name": "North Carolina", 186 | "abbreviation": "NC" 187 | }, 188 | { 189 | "name": "North Dakota", 190 | "abbreviation": "ND" 191 | }, 192 | { 193 | "name": "Northern Mariana Islands", 194 | "abbreviation": "MP" 195 | }, 196 | { 197 | "name": "Ohio", 198 | "abbreviation": "OH" 199 | }, 200 | { 201 | "name": "Oklahoma", 202 | "abbreviation": "OK" 203 | }, 204 | { 205 | "name": "Oregon", 206 | "abbreviation": "OR" 207 | }, 208 | { 209 | "name": "Palau", 210 | "abbreviation": "PW" 211 | }, 212 | { 213 | "name": "Pennsylvania", 214 | "abbreviation": "PA" 215 | }, 216 | { 217 | "name": "Puerto Rico", 218 | "abbreviation": "PR" 219 | }, 220 | { 221 | "name": "Rhode Island", 222 | "abbreviation": "RI" 223 | }, 224 | { 225 | "name": "South Carolina", 226 | "abbreviation": "SC" 227 | }, 228 | { 229 | "name": "South Dakota", 230 | "abbreviation": "SD" 231 | }, 232 | { 233 | "name": "Tennessee", 234 | "abbreviation": "TN" 235 | }, 236 | { 237 | "name": "Texas", 238 | "abbreviation": "TX" 239 | }, 240 | { 241 | "name": "Utah", 242 | "abbreviation": "UT" 243 | }, 244 | { 245 | "name": "Vermont", 246 | "abbreviation": "VT" 247 | }, 248 | { 249 | "name": "Virgin Islands", 250 | "abbreviation": "VI" 251 | }, 252 | { 253 | "name": "Virginia", 254 | "abbreviation": "VA" 255 | }, 256 | { 257 | "name": "Washington", 258 | "abbreviation": "WA" 259 | }, 260 | { 261 | "name": "West Virginia", 262 | "abbreviation": "WV" 263 | }, 264 | { 265 | "name": "Wisconsin", 266 | "abbreviation": "WI" 267 | }, 268 | { 269 | "name": "Wyoming", 270 | "abbreviation": "WY" 271 | } 272 | ]); 273 | 274 | --------------------------------------------------------------------------------