I use the ngOptions directive in the HTML given below:
<select ng-model="selectedGroupToShow.Id" ng-options="g.Id as g.Name for g in myGroups">
<option value>-- All --</option>
</select>
The filter I am using in ng-repeat to show my data goes like this:
filter:{GroupId:selectedGroupToShow.Id}"
Even if I use
filter:selectedGroupToShow
the issue stays the same.Resetting the filter..
This works perfectly, but when I want to clear the filter (select default option - 'All') it will only show data that doesn't have GroupId parameter set at all.
How can I show ALL the data (clear the filter) when choosing default option element within select?
I think I understand your problem and the issue you are facing is when dropdown selected to --ALL-- its value is null and not undefined.
So to reset it you have to set it for undefined.
<div ng-repeat="item in items| filter:{itemId:selectedGroupToShow.Id||undefined}">
{{item.itemId}}
</div>
Please refer the below fiddle I have created for your problem.
fiddle
I did it this way, just with an empty String value.
Hope it could help anyone.
JADE code:
select.form-control(ng-model="productType", ng-init="productType='free'")
option(value="free") FREE
option(value="interest") INTEREST
option(value="hybrid") HYBRID
option(value="") ALL
.col-sm-6.col-md-4.col-lg-3(ng-repeat="product in productList | filter:{ type :productType }") {{product.name}}
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
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 am facing some issue on select tab when using in ng-repeat.
On Stackoverflow i found many solution related to my broblem but i am not able to solve my broblem.
Here is my code..
on the top of page i define my controler
<ion-view view-title="Product" ng-controller="productCtrl as pd">
and on controller
self.pdata = response;
On html page my code is..
<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
<h5>{{x.title}}</h5>
<select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
<option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
</select>
</div>
here my select tab is in ng-repeat loop
so that every time my ng-model is define dynamically.
My Problem is:-extra blank option added using ng-repeat in select tag
modify your select tag like this, it's a bit mouthful but works alternatively you can also keep your option tag and remove ng-options from my select tag.
<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>
here is a jsFiddle
Initially problem seems to be here
value="{{y.value_id}}"
see more here The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options
use a hard coded empty value
<option value="" ng-if="false"></option>
I have the following code:
<select ng-model="sortYear">
<option value="all">All Years</option>
<option ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'" value="{{article.year}}">{{article.year}}</option>
</select>
Which works perfectly. I've even got sortYear bound at a different point on the page, and it's connected fine, etc.
My problem is, when I get to the page, I want the default, prechosen selection to be the top actual year, not "All Years". I've tried a couple things:
1) I set $scope.sortYear in my controller. I know it's setting it since the bound sortYear later in the page is showing up just fine on the initial load.
2) I tried using ng-init to set it to a year explicitly, as well as tried the ng-init="sortYear = getCurYear()" where I defined a function getCurYear in the controller (and verified that I was actually hitting that function and setting/returning what I thought I should be) but nada.
What am I missing?
use ng-value in option tag with ng-repeat like
<option ng-value="article.year" ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'">{{article.year}}</option>
I have the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.
What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.
Any input is appreciated!
<div ng-repeat="optionType in productDetailModel.OptionTypes">
<select name="{{optionType.OptionTypeName}}">
<option ng-repeat="option in optionType.Options"
value="{{option.OptionValue}}">{{option.OptionValue}}
</option>
</select>
</div>
Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview
The initial option is blank because the model is initially undefined.
As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.
$scope.modelName = $scope.optionType.Options[0];
It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.
<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options">
</select>
This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.
Hope this helps.
Use ng-options when using a select!
<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>
And then set the ngModel to the default option you want selected:
$scope.someModel = $scope.optionType.Options[0]
There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.
$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object