Wijmo 5 - ComboBox, AutoComplete, ListBox

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h3>ComboBox, AutoComplete, ListBox</h3>

    <h4>Choose a country using a <b>ComboBox</b>:</h4>
    <wj-combo-box 
        ng-hide="false"
        ng-disabled="false"
        required="false"
        text="firstCountry" 
        items-source="countries"
        is-editable="false" 
        placeholder="country">
    </wj-combo-box>
    <p>Here is the country as seen by the controller:</p>
    <b>{{firstCountry}}</b>
    
    <p></p>
    <p></p>
    
    <h4>Choose a country using an <b>AutoComplete</b>:</h4>
    <wj-auto-complete
        text="secondCountry" 
        items-source="countries"
        placeholder="country"
        selected-index-changed="changedIndex()"
        text-changed="textChanged()">
    </wj-auto-complete>
    <p>Here is the country as seen by the controller:</p>
    <b>{{secondCountry}}</b>
    
    <p></p>
    <p></p>

    <h4>Choose a country using a <b>ListBox</b>:</h4>
    <wj-list-box
        style="height:200px"
        selected-item="thirdCountry" 
        items-source="countries">
    </wj-list-box>
    <p>Here is the country as seen by the controller:</p>
    <b>{{thirdCountry}}</b>

    <p></p>
</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // list of countries to select from
    $scope.countries = [
        'Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla',
        'Antigua', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 
        'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize',
        'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bonaire', 'Bosnia', 'Botswana', 'Brazil', 
        'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada',
        'Canary Islands', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad',
        'Channel Islands', 'Chile', 'China', 'Christmas Island', 'Cocos Island', 'Colombia', 
        'Comoros', 'Congo', 'Cook Islands', 'Costa Rica', "Cote D'Ivoire", 'Croatia', 
        'Cuba', 'Curacao', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 
        'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea',
        'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland',
        'France', 'French Guiana', 'French Polynesia', 'French Southern Ter', 'Gabon', 'Gambia', 
        'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Great Britain', 'Greece', 'Greenland', 
        'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guinea', 'Guyana', 'Haiti', 'Honduras',
        'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland',
        'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 
        'Kiribati', 'Korea North', 'Korea South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon',
        'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia',
        'Madagascar', 'Malaysia', 'Malawi', 'Maldives', 'Mali', 'Malta', 'Marshall...