Hello everyone i am trying to select single value from uib-typeahead group of values,can any buddy tell me how can i achieve that.Thank you
<div class="col-md-12 col-sm-12 col-lg-12 nopadding">
<label for="company">Company/Project*</label>
<input type="text" class="form-control" data-ng-model="formInfo.company"
name="company" ng-disabled="loadingCompanyDetails" ng-blur="fetchCompanyDetail()"
ng-change="resetLocation()" placeholder="Company Name"
uib-typeahead="company for company in companyList | filter:$viewValue | limitTo:10"
id="company" autocomplete="off" required>
</div>
above is my code where on typing any value its giving auto list of options ,so how can i get single value as default selected value from that list,at first time i dont want to type in input tag and it gives list of values,instead of this i want it will select by default one value out of that list.
here is controller code:
$scope.fetchCompanyList = function () {
uploadService.getCompanyList()
.then(function (response) {
$scope.companyList = response.data;
},
function (error) {
$scope.errorMessage = error.status + " : " + error.statusText;
if (error.status === 401) {
loginService.authenticationError();
}
}
);
};
/**
* Method to fetch company details
*/
$scope.fetchCompanyDetail = function () {
if ($scope.formInfo && $scope.companyList.indexOf($scope.formInfo.company) >= 0) {
$scope.company = {};
$scope.loadingCompanyDetails = true;
$scope.hideCompanyAboutUs = true;
$scope.getCompanyDetails($scope.formInfo.company);
}
};
here is my screen shots of application.
when user type its give list of options.
what actually i want it will select by default one selected value in input box.
Thanks
I don't know your full code but enough to define ng-model
.
I suggest you to use id
to identify selected object:
$scope.company = {
id: 2,
name: 'Bert'
};
And your input will look like:
typeahead-loading="loading" typeahead-no-results="noResults" class="form-control input-sm" autocomplete="off" required>
JS:
$scope.companyList = [
{'id': 1, 'name': 'Aaron'},
{'id': 2, 'name': 'Bert'},
{'id': 3, 'name': 'Cesar'},
{'id': 4, 'name': 'David'},
{'id': 5, 'name': 'Elsa'}];
$scope.company = {
id: 2,
name: 'Bert'
};
$scope.selectTypeAhead = function($item) {
$scope.company.id = $item.id;
};
So if you don't get proper model - that means formInfo.company
is not defined properly.
You can easily validate it by typing in HTML:
<pre>{{formInfo|json}}</pre>