Currently, I am implementing angular's typeahead functionality using the following resource:
I have created a directive with the following template:
<div>
<input type="text"
ng-model="user.selected"
placeholder="Type to select . . ."
typeahead="item as item.name for item in getData($viewValue)"
typeahead-loading="loadingData"
class="form-control">
<i ng-show="loadingData" class="glyphicon glyphicon-refresh"></i>
</div>
The directive code is as follows:
return {
restrict: 'AE',
replace: true,
scope: true,
templateUrl: 'type.html',
link: function (scope, elem, attrs) {
var url = window.location.origin + attrs.url;
scope.getData = function (val) {
return $http.get(url, {
params: {
q: val
}
}).then(function (response) {
return response.data.map(function (item) {
return item;
});
});
};
}
};
This directive can be used as shown below:
<my-directivw url="api/user"> </my-directive>Now, instead of setting ng-model="user.selected" directly in the template, I want to use another variable. How can this be achieved?
You can achieve it by modifying the directive call as follows:
<my-directive url="api/user" somevar="user.selected"> </my-directive>Please advise on how to proceed.