Wijmo 5 - ComboBox binding

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/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">

    <wj-auto-complete control="combobox"
        placeholder="enter product category"    
        is-required=false
        items-source="products"
        display-member-path="name"
        selected-value-path="category"
        ng-model="selectedValue"
        >
    </wj-auto-complete>
    {{selectedValue}}
   
</div>

JavaScript

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

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

    var products = [
        { name: 'Widget', price: 123, category: 1 },
        { name: 'Gadget', price: 456, category: 2 },
        { name: 'Sprocket', price: 32, category: -1 }, // no category
        { name: 'Gizmo', price: 56, category: 2 },
        { name: 'Doohickey', price: 31, category: 1 }
	];
   $scope.products=[];
   // service delay
   $timeout(function(){
   	$scope.products=products; 
   },1000);
    $timeout(function(){
     	$scope.selectedValue=null;
    },1001);
   
   // $scope.products = new wijmo.collections.CollectionView(products);
   // $scope.categories = categories;
    
});