I am trying to use this plugin in my project to have multiple range slider within ng-repeat. http://prajwalkman.github.io/angular-slider/
The plugin works fine when there is single slider , but when i try to put multiple slider in ng-repeat it doesn't work.
Not sure is there anything wrong with my codes or the plugin doesn't support that.
Is there anyway i can make it work?
Here is the demo plnkr.
http://plnkr.co/edit/9H7WF44X7zCWaw91jDyr?p=preview
<body ng-controller='PriceCtrl'>
{{position}}
<div>
<slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>
</div>
<div ng-repeat="item in items">
{{item}}
<slider floor="10" ceiling="60" ng-model-low="item.minPrice" ng-model-high="item.maxPrice"></slider>
</div>
</body>
app.controller('PriceCtrl', function ($scope){
$scope.items = [{name: "item 1", minPrice: 10,
maxPrice: 50},
{name: "item 2", minPrice: 5,
maxPrice: 40},
{name: "item 3", minPrice: 15,
maxPrice: 30}];
$scope.lower_price_bound = 0;
$scope.upper_price_bound = 50;
$scope.position = {
name: 'Potato Master',
minAge: 25,
maxAge: 40
};
});
You can use rg-slider
It's allows you to use multiple sliders in one page.
Related
I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
It looks like it's working, but we have not seen any selected sign. When I select from the dropdown box It's look like-
Here is my code,
Angular Directive,
scope.example9model = []; scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; scope.example9settings = {enableSearch: true};
Call from HTML,
<div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
what's the problem there I can't figure out this.
<ul ng-repeat="cate in restaurant.categories"><li>{{cate}}</li>
<li ng-repeat="menuItem in restaurant.menuItems" ng-show="menuItem.category == cate">{{menuItem.name}}</li></ul>
I want one ng-repeat loop inside another and to show the menu only if the menuItem is in the category. I only have items in the first category loop, and empty for all the other categories.
Categories and menuItem are 2 different arrays. If the menuItem's category is under the current category it should be added to the page.
menuItems = {{name: dish1, category:soup},
{name: dish2, category:beef}}
categories = {beef, soup}
#show-me-the-code : Bill Bi has two different array. So the best option to achieve this is by filter in inside loop as stated in my comment.
Here is the final code with filter for inside loop. I am including fiddler for quick reference.
<div ng-app ng-controller="testCtrl">
<ul ng-repeat="cate in categories">
<li>{{cate}}</li>
<li ng-repeat="menuItem in menuItems | filter:{category: cate}">{{menuItem.name}}</li>
</ul>
</div>
function testCtrl($scope) {
$scope.menuItems = [{name: 'dish1', category:'soup'},
{name: 'dish2', category:'beef'}];
$scope.categories = ['beef', 'soup']
}
Fiddle : JSFiddle
I would change my data representation to match what you are actually trying to display like so:
$scope.restaurant = {
categories: [{
name: "beef",
menuItems: [{
name: "dish1",
"price": "$10"
}, {
name: "dish2",
"price": "$15"
}]
}, {
name: "soup",
menuItems: [{
name: "dish1",
"price": "$20"
}, {
name: "dish2",
"price": "$25"
}]
}]
};
This way you could easily match your two nested loops like this:
<div ng-app ng-controller="testCtrl">
<ul ng-repeat="cate in restaurant.categories">
<li>{{cate.name}}</li>
<li ng-repeat="menuItem in cate.menuItems">{{menuItem.name}} - {{menuItem.price}}</li>
</ul>
</div>
Check out this fiddle if you would like to see it in action.
If you need to stick to your JSON data, you will have to do filtering to pull the contents you want to display.
I want to add a option like ALL which will display all records in the UI-grid using angularjs, like below
paginationPageSizes: [
{label: "10", value: "10"},
{label: "25", value: "25"},
{label: "All", value: $scope.gridOptions.totalItems}]
You can adjust their optionsdropdown but its not totally smooth. I created a Plunkr showcasing a possible solution.
First you modify the paginationPageSizes object the way you already did
paginationPageSizes: [
{label: '25', value: 25},
{label: '50', value: 50},
],
To add your ALL, you can push that value after getting your data.
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.gridOptions1.data = data;
$scope.gridOptions1.paginationPageSizes.push({label: 'ALL', value: $scope.gridOptions1.data.length});
});
Now comes the tricky part!
You have to modify the options-template to match your new paginationPageSizes object.
$templateCache.put('ui-grid/pagination',
"<div class=\"ui-grid-pager-panel\" ui-grid-pager ng-show=\"grid.options.enablePaginationControls\"><div class=\"ui-grid-pager-container\"><div class=\"ui-grid-pager-control\"><button type=\"button\" ng-click=\"paginationApi.seek(1)\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle\"><div class=\"first-bar\"></div></div></button> <button type=\"button\" ng-click=\"paginationApi.previousPage()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle prev-triangle\"></div></button> <input type=\"number\" ng-model=\"grid.options.paginationCurrentPage\" min=\"1\" max=\"{{ paginationApi.getTotalPages() }}\" required> <span class=\"ui-grid-pager-max-pages-number\" ng-show=\"paginationApi.getTotalPages() > 0\">/ {{ paginationApi.getTotalPages() }}</span> <button type=\"button\" ng-click=\"paginationApi.nextPage()\" ng-disabled=\"cantPageForward()\"><div class=\"last-triangle next-triangle\"></div></button> <button type=\"button\" ng-click=\"paginationApi.seek(paginationApi.getTotalPages())\" ng-disabled=\"cantPageToLast()\"><div class=\"last-triangle\"><div class=\"last-bar\"></div></div></button></div><div class=\"ui-grid-pager-row-count-picker\">"+
"<select ng-model=\"grid.options.paginationPageSize\""+
//"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0]\" " +
"ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes track by o.label\">"+
"</select><span class=\"ui-grid-pager-row-count-label\"> {{sizesLabel}}</span></div></div><div class=\"ui-grid-pager-count-container\"><div class=\"ui-grid-pager-count\"><span ng-show=\"grid.options.totalItems > 0\">{{showingLow}} - {{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}</span></div></div></div>"
);
See 4th line where I added the new parse logic.
Now regarding the not easily solved problem. As you can see in the Plunkr, you dont have a default selection this way, because you got an object instead of plain values.
The ng-init block shows what could be done about that but you would need to dig very deep into their sourcecode because the paginationPageSize is used as a plain number in their code and instead we have an object now.
Update: I tried a few setups and it actually worked. Using the options without track by made the difference. See updated Plunkr.
"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0].value\" " +
"ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes\">"+
This is my first post on here so bear with me, I'm fairly new to AngularJS as well. I'm trying to build a form with ng-repeat and having trouble wrapping my head around the angular stuff.
JS in controller:
$scope.myCurrentAssets = {
cash_equiv: {name: 'Cash & Equivalents', value: 0, tbi: 41},
invest: {name: 'Short Term Investments', value: 0, tbi: 42},
notes_rec: {name: 'Notes Receivable', value: 0, tbi: 43},
account_rec: {name: 'Accounts Receivable', value: 0, tbi: 44},
inventory: {name: 'Inventory', value: 0, tbi: 45},
prepaid: {name: 'Prepaid Expenses', value: 0, tbi: 46},
other: {name: 'Other Current Assets', value: 0, tbi: 47}
};
HTML:
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets.{{keyAssets}}"
data-ng-model=""
data-placeholder="{{valueAssets.value}}"
data-ng-change="compute()"
/>
</div>
The problems I'm having are:
trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
how do I access the value of the input field from the compute() function?
trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
You can use list[key][value] that will be different per item in ng-repeat
how do I access the value of the input field from the compute() function?
Generally you can use ng-model that automatically fetches input data.
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets[keyAssets]['name']"
data-ng-model="myCurrentAssets[keyAssets]['value']"
data-placeholder="myCurrentAssets[keyAssets]['value']"
data-ng-change="compute(myCurrentAssets[keyAssets]['value'])"
/>
</div>
Demo Fiddle
Let's say I have a 4 div tags in my view:
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
And let's say that when the user selects clicks on one of them I want the rest to, say, turn red. Normally in a dirty jQuery style I'd use something like:
var tiles = $('.tile');
tiles.click(function()
{
tiles.css('background', 'red');
});
However, how would I do this in the world of AngularJS? Would I stick this code in the controller and have it relative to the $scope? Or would I create a directive and bind that to each tile element?
Assuming that you wouldn't just have 4 random tiles in your interface not bound to some kind of model, you could do something like this:
http://jsfiddle.net/V4YC9/1/
HTML
<div ng-app ng-controller="x">
<div ng-repeat="tile in tiles" ng-click="selectTile(tile)" ng-class="tile.class">{{tile.name}}</div>
</div>
JavaScript
function x($scope) {
$scope.selectedTileIndex = null;
$scope.tiles = [
{id: 1, name: 'tile 1'},
{id: 2, name: 'tile 2'},
{id: 3, name: 'tile 3'},
{id: 4, name: 'tile 4'}
];
// provide default class to all tiles
angular.forEach($scope.tiles, function (tile) {
tile.class = 'tile';
});
$scope.selectTile = function (clickedTile) {
angular.forEach($scope.tiles, function (tile) {
tile.class = 'tileNotSelected';
});
clickedTile.class = 'tileSelected';
}
}
Edit: There are probably 10 different ways to do it. If you don't want to muddy up your model, you could store a separate array in $scope and calculate the class real time by saying ng-class="calculateTileClass(tile)", similar to what I did in my initial response: http://jsfiddle.net/V4YC9/1/