Viewing File: /usr/local/cpanel/3rdparty/share/angular-chosen/1.4.0/example/index.html
<html ng-app="chosenExampleApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script src="../dist/angular-chosen.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />
<link rel="stylesheet" type="text/css" href="../chosen-spinner.css" />
<style>
select.localytics-chosen {
display: block !important;
position:absolute;
clip:rect(0,0,0,0);
height: 29px;
}
.border-red {
border: 1px solid red;
}
</style>
</head>
<body ng-controller="IndexCtrl">
<h1>Chosen Directive Example Usage</h1>
<h2>Chosen with a promise: {{foo | json}}</h2>
<select
chosen
multiple
allow-single-deselect="true"
data-placeholder="Choose Your Own Adventure"
no-results-text="'Tough luck'"
ng-model="foo"
ng-options="value for value in optionsFromQuery"
style="width:200px;">
<option value=""></option>
</select>
<h2>Chosen with a promised hash: {{baz | json}}</h2>
<select
chosen
allow-single-deselect="true"
data-placeholder="Choose Your Own Adventure"
no-results-text="'Tough luck'"
ng-model="baz"
ng-options="value for (key,value) in optionsFromQueryAsHash"
style="width:200px;">
<option value=""></option>
</select>
<h2>Chosen with static options: {{ bar }}</h2>
<select chosen disable-search="true" ng-model="bar">
<option>Hi</option>
<option>This is fun</option>
<option>I like Chosen so much</option>
<option>I also like bunny rabbits</option>
<option value=""></option>
</select>
<h2>Passing options in as a hash: {{ woo }}</h2>
<select
ng-model="woo"
chosen="directiveOptions"
ng-options="value for value in optionsFromQuery"
style="width:200px;">
<option value=""></option>
</select>
<h2>Disabling the element with a message when the collection is empty: {{ whatever }}</h2>
<input type="checkbox" ng-model="emptyCollection" /> Empty?
<select
chosen
ng-model="whatever"
no-results-text="'Sorry no options for you'"
ng-options="value for value in emptyOptions"
style="width:200px;">
<option value=""></option>
</select>
<h2>Changing the ngModel externally: {{ myPets }}</h2>
<select
multiple
ng-model="myPets"
ng-options="value as label for (value, label) in pets"
chosen
style="width:200px;">
</select>
<h2>Disabling the selection:</h2>
<label for="disabled">Disabled</label>
<input id="disabled" type="checkbox" ng-model="disabled">
<br>
<select chosen disable-search="true" ng-model="somemodel" ng-disabled="disabled">
<option>Great</option>
<option>fun</option>
<option>Great fun .. indeed</option>
<option value=""></option>
</select>
<h2>Form validation</h2>
<p>Shows error after user selects nothing (works with Angular 1.3+, uses $touched + $invalid)</p>
<form name="form">
<select chosen disable-search="true" ng-model="somefun" name="fun" required>
<option></option>
<option>Great</option>
<option>fun</option>
<option>Great fun .. indeed</option>
</select>
<span ng-if="form.fun.$invalid && form.fun.$touched">
Error: {{form.fun.$error}}
</span>
<select disable-search="true" ng-model="somefun" name="fun" required>
<option></option>
<option>Great</option>
<option>fun</option>
<option>Great fun .. indeed</option>
</select>
<br>
<input type="submit" />
</form>
<h2>#179 - inherit-select-class inside ng-if:</h2>
<label for="ngIfInherit">Ng If {{ngIfInherit}}</label>
<input id="ngIfInherit" type="checkbox" value="1" ng-model="ngIfInherit">
<br>
<div>
<select ng-if="ngIfInherit" multiple inherit-select-classes="true" class="border-red" chosen ng-model="myPets"
ng-options="value as label for (value, label) in pets" style="width:200px;">
<option value=""></option>
</select>
</div>
</body>
</html>
Back to Directory
File Manager