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.
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 have a select control in my Angular app. The values are * (asterisk), 1, 2, ... 10.
My template looks like:
<select multiple [ngModel]="search?.filter.value" (ngModelChange)="valueChanged($event)" >
<option *ngFor="let item of searchValues">{{item}}</option>
</select>
... and in my valueChanged function I get a value when the user selects the * but undefined when they select a number. If I "force" the numbers to be string (i.e. change "1" to "1st") it works, but that's not what the client wants.
I've seen some posts suggesting this might be a bug in Angular, but I want to confirm that I'm not missing something before I go back to the client with some options.
Thanks,
James
use [ngValue]
<select multiple [ngModel]="search?.filter.value" (ngModelChange)="valueChanged($event)" >
<option [ngValue]="item" *ngFor="let item of searchValues">{{item}}</option>
</select>
WORKING DEMO
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>
I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"
As the title says I get an empty option in my HTML when I'm using ng-repeat instead of ng-options. The reason I'm using ng-repeat instead of ng-options is to be able to set a class on every option depending on it's value. I tried using a directive with ng-options but I did not achieve desired result. The problem is not that the default selected value is not set as you can see from the generated HTML. I have a suspicion that the empty option comes from the select ng-model but I'm not sure.
My HTML looks like this:
<select ng-model="selectedProduct.code" ng-init="selectFirstProduct()" ng-change="getArticle()" size="8">
<option ng-selected="{{product.code == selectedProduct.code}}" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product )" value="{{product.code}}">{{product.name}}</option>
</select>
This results in HTML to look like this:
<select ng-model="selectedProduct.code" ng-change="getArticle()" size="8" class="ng-pristine ng-valid">
<option value="? string:200230 ?"></option>
<!-- ngRepeat: product in productsForPriceList -->
<option ng-selected="true" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="200230" class="ng-scope ng-binding" selected="selected">Product 1</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300025" class="ng-scope ng-binding">Product 2</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300206" class="ng-scope ng-binding">Product 3</option>
I'm using ng-init="selectFirstProduct()" to set selectedProduct.code to the first value in the list. However if I omit this code and set selectedProduct.code when I'm getting the list the result is still the same.
I'm using Umbraco version 7.3.5 back end with Angularjs version 1.1.5.
Initialize selectedProduct.code and it will eliminate the blank option from the list.
Initialize the Object
$scope.selectedProduct = {};
Set A default to the List
$scope.productsForPriceList.YourObjectKey.IsDefault = true;
Add this line code to Controller to initialize your option
$scope.selectedProduct.code = $filter('filter')($scope.productsForPriceList, {IsDefault: true})[0];
You need to add the dependency $filter to the controller