angular
.module('plunker', ['ui.bootstrap'])
.controller('TypeaheadCtrl', ['$scope', '$http', function($scope, $http) {
$scope.vsItems = [];
$scope.concepts = function(valueSet, endpoint) {
valueSet = valueSet || 'http://snomed.info/sct?fhir_vs';
endpoint = endpoint || 'https://tx.ontoserver.csiro.au/fhir';
$http({
method: 'GET',
url: endpoint + '/ValueSet/$expand',
params: {
'url': valueSet,
'count': 10,
'_format': 'json'
},
responseType: 'json'
})
.then(function(response) {
$scope.vsItems = response.data.expansion.contains || [{
display: term
}];
});
};
}]);
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<style>
li.active span.text-muted {
color: #ddd;
}
</style>
</head>
<body ng-app="plunker">
<div class="container-fluid" style="margin-bottom:5rem;">
<h2>$expand populated selection</h2>
<p>Example of connecting FHIR's <tt><a href="http://hl7.org/fhir/STU3/valueset-operations.html#expand" target="_blank">/ValueSet/$expand</a></tt> with <tt>filter</tt> parameter to Typeahead (ui.bootstrap.typeahead) from <a href="http://angular-ui.github.com/bootstrap/"
target="_blank">http://angular-ui.github.com/bootstrap/</a>
</p>
<p>
In this example the ValueSet is the members of the Laterality Reference Set (32570611000036103). This ValueSet is <a href="http://hl7.org/fhir/STU3/snomedct.html#implicit" target="_blank">implicitly defined</a> and has the URI <tt>http://snomed.info/sct?fhir_vs=refset/32570611000036103</tt>.
</p>
<p>
Because the ValueSet is small, it is better suited to a different type of UI element.
</p>
<div class="container-fluid" ng-controller="TypeaheadCtrl" ng-init="concepts('http://snomed.info/sct?fhir_vs=refset/32570611000036103')">
<pre style="height:11rem;">{{'Selection:'}} {{result | json}}</pre>
<div style="column-count:2;">
<div class="panel panel-default" style="min-height:24rem;">
<div class="panel-heading">A simple drop-down</div>
<div class="panel-body">
<p>This style is good for relatively short lists of items.</p>
<select class="form-control"
ng-options="item as item.display for item in vsItems | orderBy:'display' track by item.code"
ng-model="result">
<option disabled value="">Select laterality...</option><!-- placeholder option -->
</select>
</div>
</div>
<div class="panel panel-default" style="min-height:24rem;">
<div class="panel-heading">A selection list</div>
<div class="panel-body">
<p>Or, for very short lists, direct selection.</p>
<select class="form-control"
ng-options="item as item.display for item in vsItems | orderBy:'display' track by item.code"
ng-model="result"
ng-attr-size="{{vsItems.length+1}}">
<option disabled value="">Select laterality...</option><!-- placeholder option -->
</select>
</div>
</div>
</div>
</div>
</div>
<nav style="position:fixed;bottom:0;width:100%;background-color:#eee;" class="navbar navbar-light bg-light">
<div class="small">
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
<br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">This exemplar</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">CSIRO</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
</div>
</nav>
</body>
</html>
# Exemplar 3 -a drop box implemented using the FHIR ValueSet $expand operation.
This is a simple example of how to connect up UI Bootstrap's Typeahead control to the [ValueSet/$expand](http://build.fhir.org/valueset-operations.html#expand) operation.
This provides a simple way to find and select a code from code systems like SNOMED CT subject to the criteria encoded in a ValueSet when the ValueSet expansion is small.
Uses a public sandbox endpoint of [Ontoserver](https://ontoserver.csiro.au/).