I have created a typeahead using the angular-ui library.
My current typeahead html is:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
Basically the typeahead search works ok but when i select the type ahead i want to retrieve all the fields which are attached to the customer record such as surname , address etc. The typeahead gets populated into property called $scope.customers in my controller which is done via an ajax call to the api to get all customers.
So on selection how can i get all the fields related to the selected customer?
Cheers
Change the uib-typeahead attribute:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer as customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
This will set the selected customer to the ng-model selectedCustomer.
Related
I am using angular bootstrap typeahead. I need typeahead on multiple input fields. Is there some option I can use that I am missing out on? Or do I need to add something hacky to achieve this?
The two fields look like this :
<label>
Sector
<span class="restrict-dropdown-menu-small">
<input type="text" class="form-control length-md"
ng-model="customBenchmark.sector"
typeahead="sector for sector in customBenchmarkOptions.sectors | filter:$viewValue:$emptyOrMatch | orderBy:'toString()'"
typeahead-focus
typeahead-select-on-blur="true"/>
</span>
</label>
<label>
Rating
<span class="restrict-dropdown-menu-small">
<input type="text" class="form-control length-md"
ng-model="customBenchmark.rating"
typeahead="rating for rating in customBenchmarkOptions.ratings | filter:$viewValue:$emptyOrMatch | orderBy:'toString()'"
typeahead-focus
typeahead-select-on-blur="true"/>
</span>
</label>
<form name="addForm" novalidate>
<input type="text" name="userName" ng-model="add.userName" placeholder="Enter Name" required>
<ui-select ng-model="select.states" required>
<ui-select-match placeholder="{{'body.stateAddrPH' | i18n}}">{{$select.selected.state}}</ui-select-match>
<ui-select-choices repeat="states in (listOfStates | filter: $select.search) track by states.state">
<span ng-bind="states.state"></span>
</ui-select-choices>
</ui-select>
<button type="submit" ng-click="submitPayment(add)">Submit</button>
</form>
This is my sample code, I want to get the form data (input field value and ui-select's selected value) on click of submit button, but I'm able to get input value in my controller but not ui-select's selected value in my controller.
So How can I achieve this?
the ui-select selected value should be the ng-model="select.states" which can be accessed in your controller using
$scope.select.states
Dropdown:
<select class="form-control" id="column" ng-model="selectedcolumn"
ng-options="column for column in columns"></select>
I want to get the drop down value for search ,something like this:
<input type="text" ng-model="SearchValue.{{selectedcolumn}}" />
<tr ng-repeat="row in table | filter:SearchValue">
I want to make search for a perticular column, not for the whole table
and the column will be decided by the dropdown.
Try <input type="text" ng-model="SearchValue[selectedcolumn]" />
Check the Demo
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
Why I couldn't get the selected typeahead value correctly using ng-change function ?
this is my code
<input
type="text"
ng-model="asyncSelected"
placeholder="Locations loaded via $http"
typeahead="address for address in getLocation($viewValue)"
typeahead-loading="loadingLocations"
class="form-control"
ng-change="change(asyncSelected)">
the problem is variable asyncSelected always return string that I typed, not selected via typeahead. This is the plunkr to show you the problem, just type in it. I fork it from official documentation of angular-ui-bootstrap
PLUNKR LINK HERE
You can use the typeahead-on-select attribute to call a function when a value is selected. Try with this:
<input type="text"
ng-model="asyncSelected"
placeholder="Locations loaded via $http"
typeahead="address for address in getLocation($viewValue)"
typeahead-loading="loadingLocations"
class="form-control"
typeahead-on-select="change(asyncSelected)">