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/
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.
I have a lot of select boxes in my application, being generated by lists of data and assigned to various ng-models.
I want to set the ng-model value to the first available option (respecting filters) of all select inputs globally in the app.
So for example a select input like this:
<select ng-model="entry.employee">
<option ng-value="employee.name" ng-repeat="employee in employees | filter:active">{{employee.name}}</option>
</select>
The entry.employee ng-model defaults to null, I need every select box to never be null but always select the first valid option of a select input by default.
It needs to be global as well and be generic enough to work with any type of select input.
Here is the data:
$scope.employees= [
{'name':'Bill'},
{'name':'Frank'},
{'name':'Ted'},
];
Instead of using ng-repeat on option elements use directly ng-option on select tag.
for example
<select class="form-control" ng-options="item.name for item in employees track by item.id" ng-model="selectedItem"></select>
in you controller use:
$scope.selectedItem=$scope.employees[0];
your object would be like:
$scope.employees= [
{id:'1','name':'Bill'},
{id:'2','name':'Frank'},
{id:'3','name':'Ted'},
];
In this case let you select tags be 'n' numbers but whenever you want you ng-model to be the first one just initialize it with the first element in your Object.
Also there is a good thing using ng-option is whenever you want to change the value of the select element at runtime you just need to update the selectedItem element.
Hope this resolves your query
I would like to set the default item in a select menu based on value rather than by index position. For example, in the sample below, if one of the radio buttons in a form displays "Oranges," and a user selects that radio button, is it possible to make the default selection in the subsequent select menu be Oranges as well? Ideally, I would prefer not to rely on the order of items in the select menu.
<input type="radio" ng-model="selectionList.message" value="{{selection.type}}">
<!--Default selection below should be based on value selected above, regardless of order-->
<select ng-model="editProject.project" ng-options="opt as opt.type for opt in editProject.options">
</select>
Is there a way to set the default based on value rather than the item's position in the select menu?
Not completely sure what you ui is supposed to look like or waht the data structures you are pulling from look like. But in your ng-change it looks like you are using a value that is foreign to the dataStructure you are trying to manipulate. ie. using a array value to return a nested value in an object. see if the below works for the situation. I also did a plnkr.co that shows an example of it working as well. But here are the main snippets that
<input type="radio" ng-model="color"
value="{{radioColors.type[1]}}"
ng-change="match()">Orange<br>
// the select element
<select ng-model="selectValue"
ng-options="selectColor as selectColor.type for selectColor in selectColors"></select>
// this would go in your controller
$scope.match = function () {
angular.forEach($scope.selectColors, function(value, key) {
if(angular.equals(value.type, $scope.color)) {
$scope.selectValue = $scope.selectColors[key]
}
});
}
Per radio input document, you can add a ng-change hook
<input type="radio"
ng-model=""
value=""
[name=""]
[ng-change=""]
ng-value="">
like ng-change="editProject.project = selection.type"
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.
I am making a html page to edit an item in angular. All the text inputs populate with the object in the $scope. The select list is populating but isn't selecting the option in the $scope object. This is the markup
<select data-ng-model="myItem.Category"
data-ng-options="c.Name for c in Categories"
data-ng-values="c.CategoryId for c in Categories"
data-ng-selected="myItem.Category" ></select>
Assuming each category has an id (or somme other unique field) use this:
<select data-ng-model="myItem.Category"
data-ng-options="c.CategoryId for c in Categories track by c.id"></select>
This will allow the matching of your model and option to be based upon id
The ng-model will define your selected value, and ng-options defines the items to show in the select.