After selecting an item in the typeahead dropdown, the input field reflects the item's value (now the bound model's value). How would I go about using the label for input value. Is there support here in typeahead directive which I'm not seeing?
My expression:
person.id as person.name for person in persons
I've also tried using using typeahead-input-formatter, but that only has the $model (value) property available, not the label.
Plunker http://plnkr.co/edit/OylBlT5KxNvKtTHac61f?p=preview
I may be using typeahead with slightly different intentions. I realized that a better approach would be to bind the typeahead to a garbage(unused) property, and utilize something like <input ... typeahead-on-select="realBinding = $item.id">
I tried with your plnkr
can you change the syntax for typeahead like below
> <input type="text" ng-model="userId" typeahead="person.name as
> person.name for person in persons | filter : $viewValue" />
typeahead="person.name as person.name for person in persons
change person.id to person.name.
it is working, let me know if you still face problem.
Change Your expression to
person.name as person.name for person in persons
If you have to show name in dropdown instead of ID and also after select name , In model you have to show name only.
then you can use this expression
person.name for person in persons
Here you no need to define persion.id in your expression.
thats not how it works.
You can do this:
<input type="text" ng-model="name" placeholder="start typing..." typeahead-on-select="itemSelected($item, $model, $label)" typeahead="person.name for person in people">
Then in your controller, define the on-select function callback:
$scope.itemSelected = function(item, model, label){
$scope.user_id = item.id;
};
Basically, when you are passing in objects to the typeahead, you can choose what value to show in the textbox, but not a hidden id as well. Unlike a select control, text boxes don't have value and label - only value.
Related
I have 2 select forms populated using ng-options, such as:
<select ng-options="item.id as product.category for product in products" ng-model="order.category" ng-change='find_brands(order.category)' ></select>
<select ng-options="brand.id as brand.name for brand in brands" ng-model="order.brand" ></select>
<button ng-click='Get_Products(order)>ORDER</button>
When the first dropdown is selected, it will trigger a $http call to populate the second dropdown like so:
$scope.find_brands = function(category){
$http
.get('Default.aspx/Find_Brands', {category: category})
.success(data){$scope.products = data.d};
};
This correctly populates the "brands" dropdown with the new values. However, when I go to select a brand, the ng-model does not change. When tested, I receive a null value. I've looked into $scope.$apply to work with the $digest cycle, but it seems like that is not my problem (the "brands" dropdown successfully gets refreshed data, it just doesn't SEND data out).
Does anyone have an idea of whats going on and how to fix it?
I've been creating this simple example for you: http://jsbin.com/degece/edit?html,js,console,output
In your code there are some errors.
In this line you use item.id instead product.id
<select ng-options="item.id as product.category for product in products" ng-model="order.category" ng-change='find_brands(order.category)' ></select>
In this you have a quote typo, you don't need the quote before Get_Products
<button ng-click='Get_Products(order)>ORDER</button>
Finally, here you need to assign the result of the call to the $scope.brands variable
.success(data){$scope.products = data.d};
In my example you can see some best practice implementations like the model initialization.
jsFiddle: http://jsfiddle.net/shandylion/2r3z1uma/
I need to display a list of objects as a list of dropdowns, where changing a dropdown changes the corresponding element in the list. Ideally, each dropdown should default to that element.
So, with the following data:
$scope.allPeople = [{"name":"Ann", "Age":10},
{"name":"Barb", "Age":20},
{"name":"Carl", "Age":30}];
$scope.selectedPeople = [{"name":"Ann", "Age":10},
{"name":"Carl", "Age":30}];
and the following HTML:
<div ng-repeat="selectedPerson in selectedPeople">
<select ng-options="person as person.name for person in allPeople"
ng-model="selectedPeople[$index]"
name="select-{{$index}}" id="select-{{$index}}"></select>
</div>
there should be two dropdowns, with the first defaulting to "Ann" and the second to "Carl".
I've tried using ng-selected, but that only seems to work with <option> tags, not inside a <select>. Other Stack Overflow posts suggest we should always use ng-options and never an <option> with an ng-repeat, so I'm stuck as to how to get this to default to the appropriate value.
Here's a sample plunker, which has a working solution as well as the faulty one described below.
The pitfall with dropdowns is that when you want to preselect a value from a list of options, the selected model should be a reference pointing to the same object from the bound list. Say you have:
var list = [{ id: 1, value: 'first'}];
var model = { id: 1, value: 'first' };
<select ng-options="item.value for item in list" ng-model="model"></select>
This will not preselect the dropdown, because list[0] and model are not the same object, although they look alike. If you set ng-model to list[0] it should be preselected just fine.
Since you're using person.name for person in allPeople, the selected option returns person.name as value. You're presetting your $scope.selectedPeople array's values as objects, which does not match with what your select list will return, and hence your initial values are not set properly.
If you want to have person.name as the value of each option, you should change your $scope.selectedPeople to this:
$scope.selectedPeople = ["Ann", "Carl"];
On the other hand if you want to return person as the value of each option, change your ng-options expression to person as person.name for person in allPeople, which means you return person and show it as person.name for each person in $scope.allPeople.
This should be really simple but I don't know how to do it.
I have a select control which looks like this:
<div class="form-group" ng-class="{ 'has-error' : saveForm.status.$invalid && !saveForm.status.$pristine }">
<label class="control-label">Status</label>
<select class="form-control" name="status" ng-options="status.name for status in controller.statuses.data track by status.id" ng-model="controller.model.data.statusId" required>
<option value="">Select a status</option>
</select>
</div>
the ng-model was bound to controller.model.data.status because at the time I wanted the entire object. Now I only require the selected id, so I changed the ng-model to controller.model.data.statusId and as you would expect the whole status object is now binding to that model location.
How can I get it to just select the id instead of the whole object while showing the names in the select control?
codepen example as requested:
http://codepen.io/r3plica/pen/yNgLqp
I prefer the select as syntax from ng-options. (This does not work with track by). Specifically, I like the form
select as label for value in array, which lets you change what is actually binding (select) from what is displayed (label).
From the documentation, the syntax has 4 parts:
select this is the expression you actually want to bind to. Often it's a property of an element in the array. In your case it's status.id
label this is the expression that determines how to display the object in the dropdown. Again, this is often a property, but it can really be any angular expression (like status.name + ': ' + status.description) In yours it's just status.name
value is the name (alias) you want to use for a single element of the array. In yours it's status but it's just a name so you could change it to just about anything (you would have to change the select and label too).
array is obviously the array you want to use as the dropdown data source. In yours it's controller.statuses.
In your code fully assembled:
ng-options="status.id as status.name for status in controller.statuses"
I am having one text box and one dropdown.
I want filtering in ng-repeat section based on both of the above control.
Means if i select name in dropdown and in text box as I typing the filtering should work based on name
and if in dropdown if i select EployeeID then filtering should be work based on Employee.
<input id="txtSearchText" ng-model="searchText"/>
<select>
<option>name</option>
<option>EmployeeID</option>
</select>
<div ng-repeat="u in users">
name : {{u.name}} || EID: {{u.eid}} :
<!-- here i want result -->
</div>
The link that domakas directed you to above should help, but the example is slightly different since it filters using 3 different text input boxes.
You are missing a few things here. The first thing is you need to apply a filter to in the ng-repeat for the users div.
<div ng-repeat="u in users | searchText">
The problem that you run into here, which I am sure you are aware of is that it will filter on all of the values in the users array. You seem to want to only filter on the value in the users array that the dropdown has specified. This means we will have to tie the filter to the dropdown in some fashion to make it dynamic.
The way I would do this is to make the filter an object and not just pure text.
$scope.searchText = {name: '', eid: ''};
Now you need to have the model of your input box tied to this object, but where it stores the value needs to be dynamic based on what the value of the dropdown
<input id="txtSearchText" ng-model="searchText[filter]" />
<select ng-model="filter">
<option value="name" selected>name</option>
<option value="eid">EmployeeID</option>
</select>
The above code will store the value of the dropdown in the correct value of the searchText object. This means that the filter will now use this object to filter out the results in the users div instead of just a string, which it would compare to the full JSON object.
Edit:
Added a watch on the 'searchText' object to clear the other value if the dropdown is switched. Without this the old filter value was still in the 'searchText' object, which caused it to filter on both values.
$scope.$watch('filter', function() {
if($scope.filter == "eid") {
$scope.searchText.name = '';
} else {
$scope.searchText.eid = '';
}
});
Here is a JSFiddle with a working example:
http://jsfiddle.net/glandrum101/NM5A5/1/
I have simple question for AngularJS select. I'm creating select tag using array from objects.
<select data-ng-model="selectedPipeLine" name="selectedPipeLine" required="required" data-ng-options="obj.id as obj.name for obj in pipeLinesList">
</select>
{{selectedPipeLine}}
When user selected from this select the selected id obj.id is displayed near to select.
But the objects into array have other properties. How I can display other property?
{{pipeLinesList[selectedPipeLine]}} don't working.
I would appreciate any ideas and tips.
Here is jsfiddle:
http://jsfiddle.net/zono/6bpNY/2/
I want to get value of otherProperty.
Best Regards.
In your case, I think you could change your expression like this:
data-ng-options="obj.name for obj in pipeLinesList"
Your selectedPipeLine in this case is not the id, but the reference to the currently selected object => you can freely access any properties of this object. Like this:
<select data-ng-model="selectedPipeLine" name="selectedPipeLine" required="required" data-ng-options="obj.name for obj in pipeLinesList">
</select>
{{selectedPipeLine.id}}
{{selectedPipeLine.otherProperty}}
Your updated demo