I am newbie with AngularJS, I really need some help here.
I have JSBIN working example that displays two charts with different data.
For each chart I have different ng-controller. By issue is my select dropdown only works with <div ng-controller="first"> chart.
My goals is to update both charts with select dropdown menu.
If you check clearly,
The $scope.filterOptions which is used in dropdown is defined in first controller. It is available in second because it is nested controller
<select ng-model="selectedyear" ng-change="sampleDropDown()">
<option ng-repeat="year infilterOptions.stores| unique: 'year'">
{{ year.year }}
</option>
</select>
Related
I have a controller:
app.controller("AllController", function($scope, $http){
$scope.listSkills = function() {
$http.get("/showSkills").success(function(skills_from_database){
$scope.skills = skills_from_database.list;
})
}
});
This is the html with both selects, but only the first one works:
<select name="skill_category" id="skill_category" form="AddSkillForm" onclick="showNewCatInput()">
<option value="newCat">New category</option>
<option ng-repeat="category in skills" value="{{category.categoryName}}">{{category.categoryName}}</option>
</select>
<select name="skill_subcategory" id="skill_subcategory" form="AddSkillForm" onclick="showNewSubCatInput()">
<option value="newSubCat">New subcategory</option>
<option ng-repeat="subcategory in category.subcategories" value="{{subcategory.subcategoryName}}">{{subcategory.subcategoryName}}</option>
</select>
So I know that to get all the subcategories I need the category selected on the first select, but I don't know how to do it. As I read, I think that I need to use ng-model, but even if I could connect the 2 selects, it would still not work the second one.
That is because I can't access the subcategory with this:
ng-repeat="subcategory in category.subcategories"
Simply because "category" doesn't exist there, so where it comes? from this other code that works:
<div ng-repeat="category in skills">
<h1>{{category.categoryName}}</h1>
<div ng-repeat="subcategory in category.subcategories">
<h2>{{subcategory.subcategoryName}}</h2>
</div>
</div>
As you can see, I know I have to access to "category in skills" first, but what I need is not all categories in skills, I need just the selected category.
So to summarize the problems:
Don't know how to use ng-model to bind 2 selects and
don't know how to access the subcategories from the selected category
The json data and angular scope can be found in this other post that I made yesterday, there you can also see the html/angular code that works to get the category and subcategory.
Stackoverflow post
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.
I cant seem to get my select drop down "show more results" to work with ui-bootstrap. I got it working with dir-pagination but not bootstrap. What I simply need it to do is when they select 10 from the dropdown I want it to display ten results. Simple right? Not for me apparently. :()
Here is my HTML:
// Show more results
<select ng-model="pageSize" id="pageSize" class="form-control searchShowMore">
<option ng-selected="true" value="5">5</option>
<option value="10">10</option>
</select>
<div ng-repeat="res in details.Results | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize" class="myCar">
<div class="carId">{{ res['Display Name'] }}</div>
<div class="title">{{ res['Project Title'] }}</div>
<h4><u>Amount</u></h4>
<div class="modified">${{ res.Amount | number: 2 }}</div>
</div>
<ul uib-pagination total-items="details.Results.length" ng-model="currentPage" items-per-page="pageSize"></ul>
Right now it just displays all the results unless I add $scope.pageSize = 5; in the controller. I figured that it would would work the same as dir-pagination but I'm obviously wrong. :)
One thing to point out also is that it only loads all the data at first. Once I click the dropdown and select 5 it changes the items per page to only show 5. It is just the initial load where it shows all the data. I think it has something to do with the select option that has ng-selected="true" value="5". Its not grabbing the initial value at the beginning
Anyone know if this is possible with ui-bootstraps pagination?
Do these things,
Remove startFrom and limitTo in the ng-repeat. uib-pagination will automatically see to it.
Set the select ng-model as ng-model="pageSize" and items-per-page="pageSize" for theuib-pagination
ng-model of uib-pagination is currentPage. Do not set it to pageSize.
I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller
Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.
You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
as ng-options is not working in my select button
<script type="text/javascript">
$('.selectpicker').selectpicker();
</script>
..
...
<label class="input-label">Select among this :</label> <select
class="selectpicker" multiple
data-selected-text-format="count" >
<option ng-repeat="attribute in attributes">{{attribute}}</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
I have also tried the 'ng-options' in the select tag but it is also not working.
I think! ,it is not loaded due asyncronous call , please suggest the alternative solution or how to load data when the background rest call is complete in angular JS.
My rest is working fine. only data is not properly binding
Like here my rest data is loaded and when I select it from dropdown it is showing up inthe selected list but not displaying in the list. I think just because of asynchronous nature of data loading in the frontend.
or Do i need to write any directive ?
Your controller may have different $scope.