I have a select Dropdown created using AngularJS. We have set a limit to show the top 5 items and the remaining 5 items should be visible to the user . when he clicks the 5th item with the name "shore more (5)" , Without losing focus which means without closing the dropdown, remaining 5 items must be displayed and if a maximum height is reached scroll bar should automatically come. I tried this but could not find a solution.
Below is my code to create a select drop down
<div ng-if="items.groups.length>5"
class="bx--select-input__wrapper" style="width: 100%">
<select carbon-select class="dropDown-text-overflow bx--select-input"
ng-model="selectedGroup"
ng-change="selectNegotiatedGroup(selectedGroup)">
<option class="bx--select-option"
data-ng-repeat="groupName in items.groups|limitTo:5"
value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
<option ng-selected="false" value="show_more" ng-style="hideVisibility">Show More({{items.groups.length-5}})</option>
</select>
</div>
// create some vars for pagination control
var displayIndex = 0;
var displayCount = $scope.items.groups.length < 5 ? $scope.items.groups.length : 5;
// create another array to display partial results
$scope.itemsToDisplay = $scope.items.groups.slice(displayIndex, displayCount);
// create a method to move pagination forward when called
$scope.showMore = function() {
// calculate the index and max item count for the next page
displayIndex++;
var max = displayIndex * 5;
if (max > $scope.items.groups.slice.length - 1) max = $scope.items.groups.slice.length - 1;
// appends the array's calculated range to the array that is displayed in the view
$scope.itemsToDisplay = $scope.itemsToDisplay.concat($scope.items.groups.slice(displayIndex, max - displayIndex));
}
In your view, you then have to display the itemsToDisplay array and get rid of the filter:
<div ng-if="itemsToDisplay.length>5"
class="bx--select-input__wrapper" style="width: 100%">
<select carbon-select class="dropDown-text-overflow bx--select-input"
ng-model="selectedGroup"
ng-change="selectNegotiatedGroup(selectedGroup)">
<option class="bx--select-option"
data-ng-repeat="groupName in itemsToDisplay"
value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
<option ng-selected="false" value="show_more" ng-style="hideVisibility" ng-click="showMore()">Show More({{items.groups.length-5}})</option>
</select>
</div>
Related
I should preface this by saying I am teaching myself how to learn code, so if anything looks way off, that's why.
I've created some dropdowns and buttons for a list of Cold, Warm, and Multi color options. I have the arrays for the colors all set up; when I click the buttons associated with the color group, I get a randomly chosen color from that color group. However, I want the onclick function of the button to give me two colors when two color groups are mixed. For example: Warm x Cold = blue / yellow; Multi x Red can = Blue / Orange.
I have attempted various strings of code to try and get this to work, but I think I am combining them incorrectly. My most recent attempt is below. most of my attempts have included $('input[id=colormixer]').click(function () with attempting to associate an id from the dropdown with the correct var(s) with no avail. I get an error that 'getValue' is undefined along with the code simply not working of course.
<html>
<select>
<option id="set1" name="dropone" value="cold">Cold</option>
<option id="set2" name="dropone" value="warm">Warm</option>
<option id="set3" name="dropone" value="multi">Multi</option>
</select>
X
<select>
<option id="seta" name="droptwo" value="cold">Cold</option>
<option id="setb" name="droptwo" value="warm">Warm</option>
<option id="setc" name="droptwo" value="multi">Multi</option>
</select>
<br>
<head>
<meta charset="utf-8">
</head>
<button onClick="displayValue();" id="colormixer">Color Mixer</button>
<script>
var colddata = ["Blue","Green","Purple"];
var warmdata = ["Orange","Red","Pink",];
var multidata = ["Orange","Red","Pink","Blue","Green","Purple"];
var div = document.getElementById('result');
var current = 0;
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function displayValue()
{
if $('input[id=colormixer]').click(function () {
if (this.id == "set1" || "setb"){
}
{
document.getElementById('colormixer').disabled = true;
return;
}
div.innerHTML = div.innerHTML + colddata[current] + warmdata[current] "<br>";
current++;
}
dropone +- " / " + droptwo;
}
</script>
This is what I've tried to get the selection of the dropdown options to change what arrays get spit out onclick of the associated button.
Ideally, I'd love to get this to where if for example, Cold x Warm is entered, onclick I'll get two items from the Multiple color array in the format of "Color / Color". I just don't know where to go from here. Any help in steering me in the right direction would be fantastic! Thank you in advance.
I have 3 fields.
1st - option field / ng-repeat over available dates
2nd - option field / based on the date chosen by user, I do ng-repeat over quantity. I have tried all different ways but I can't make it depend on the first option field or other things don't work. Any help would be great! Thanks !!
html:
<div class="containerDiv">
<div>
<select ng-model='date'>
<option ng-repeat="availableDateProduct in product " value='{{i}}'>{{availableDateProduct.dateOfActivity}}
</option>
</select>
</div>
<div ng-repeat="availableDateProduct in product ">
<select>
<option ng-repeat='i in quantityLister(availableDateProduct.quantity)' value='{{i}}'>
{{i}}
</option>
</select>
</div>
<div>
<button>Book</button>
</div>
</div>
js:
app.controller('ProductCtrl', function($scope, ProductsFactory, $stateParams) {
ProductsFactory.fetchByTitle($stateParams.title)
.then(function(product) {
$scope.product = product;
})
$scope.quantityLister = function(num) {
var array = [];
for (var i = 1; i <= num; i++) {
array.push(i)
}
return array;
}
})
data:
var products = [
{
title:'Bowling',
description:'Its fun!',
photoUrl:'https://www.1.jpg',
quantity:12,
price:9,
dateOfActivity: '2017-13-07'
},
...
]
Thanks!!
Angular has a directive built specifically to accomplish this task; ng-options.
First, we define an object in the controller that will hold the values selected from the dropdown:
$scope.reservation = {};
Next, we use ng-options on our dropdowns, and use the ng-model property to accept the value selected. In the first dropdown, we take the array of products, display the dateOfActivity for each product, and save the product object to ng-model when selected. (work from right to left in the ng-options definition).
ng-model="reservation.selectedProduct"
ng-options="product as product.dateOfActivity for product in products"
In our second dropdown, you have defined a function to take a number and spread it into an array. We call this function from reservation.selectedProduct.quantity, and then use this array as the basis for the ng-options:
ng-model="reservation.selectedQuantity"
ng-options="num for num in quantityLister(reservation.selectedProduct.quantity)"
Now we have an object which has the selected values for both dropdowns, we just need to change the quantity in the original array on button press. we also want to clear the selections afterwords, to ensure that the user can't accidentally make a duplicate reservation.
$scope.reserve = function (){
$scope.reservation.selectedProduct.quantity -= $scope.reservation.selectedQuantity;
$scope.reservation = {};
};
Here we use the shorthand -= to subtract the selectedQuantity from the selectedProduct.quantity. since selectedProduct is two way bound, the change to selectedProduct is reflected in the original object in the product array as well. However, The quantityLister function isn't dynamic; if we don't reset $scope.reservation, the second dropdown would hold a now invalid number of available reservations.
I am struggling with Angularjs filters (nested buttons).
I want to have three drop down menus where the content of the 2nd menu bases on the first menu, the text for the 3rd menu bases on the selection of menu 2. The text which should be displayed is indicated by "Level" information.
My data structure is a JSON structure.
My idea is now:
1) for the 1st menu the user needs to select an item and based on this the ID_level is set to the first two numbers of the ID.
2) Based on the selection, a foreach loop searches in the values for Level-2 items which start with the same 2 digits at the ID-_level.
3) Then the content the second menu is shown.
For for some reason I have problems to access the selection of the first menu in my code, i.e. if I select "Goods" then I do not get any response for the level 2. The code for level 3 is not displayed.
HTML:
<select ng-model="View2.selection" >
<option value="">---Please select---</option>
<option ng-repeat="option in View2.data1" value="{{option}}">{{option}} </option>
</select><br>
<select ng-model="View2.selectionTwo" ng-change="View2.change(selection)">
<option value="">---Please select---</option>
<option ng-repeat="option in View2.data2" value="{{option}}">{{option}} </option>
</select>
AngularJS:
var values = [{ Name:'Goods', ID:'010000000000', Level:'1'},
{ Name:'Electronic good', ID:'010100000000', Level:'2'},
{ Name:'Coffee machine', ID:'010101000000', Level:'3'},
{ Name:'Water filter', ID:'010101030000', Level:'3'},
{ Name:'Non-electronic good', ID:'010100000000', Level:'2'},
{ Name:'Hair care', ID:'010101000000', Level:'3'},
{ Name:'Cream', ID:'010101030000', Level:'3'},
{ Name:'Non-Goods', ID:'020000000000', Level:'1'},
{ Name:'Games', ID:'020100000000', Level:'2'},
{ Name:'Toys', ID:'020101000000', Level:'3'}];
var id_level1, id_level2;
self.change = function(selection) {
/*Get selection from level 1 */
this.selection=selection;
/*Search in values for selected Item and get ID from level 1 */
angular.forEach(values, function(value, key){
if (value.Level=='1') {
if (value.Name==selection) {
id_level1=value.ID.substr(0,2)
}
}
});
/*Push all items for level 1 to data2 whose data is then displayed next drop down*/
self.data2=[];
angular.forEach(values, function(value, key){
var test=value.ID.substr(0,2);
if (value.Level=='2' && test==id_level1) {
self.data2.push(value.Name);
id_level2=value.ID.substr(0,4);
}
});
};
Has anybody an idea how I could set this up in a working manner?
When you use <select> with angular, usually it's best practice to use ng-options. Check it out here https://docs.angularjs.org/api/ng/directive/ngOptions
<div ng-app>
<form ng-controller='chip'>
<select data-ng-options="n for n in simOptions" data-ng-model="simQuantity"></select>
<div ng-if="simQuantity>=1">
<select name="sim" ng-model="formData.sim[0]" ng-options="sim for sim in sims" ></select>
</div>
<div class="suscriptor_fields" ng-if="simQuantity>=2">
<select name="sim"
ng-model="formData.sim[1]"
ng-options="sim for sim in sims" ></select>
</div>
<div class="suscriptor_fields" ng-if="simQuantity>=3">
<select name="sim"
ng-model="formData.sim[2]"
ng-options="sim for sim in sims" ></select>
</div>
<div class="suscriptor_fields" ng-if="simQuantity>=4">
<select name="sim"
ng-model="formData.sim[3]"
ng-options="sim for sim in sims" ></select>
</div>
{{formData.sim}}
If in the first select i choose 2 to 4 and select a value in the second to fourth select options and then i reselect the first one with a lower value, the ng-if turns to false but the ng-model doesnt change i need to get it to null again, so if doesnt get sent when i submit the form. In a nutshell, if a user selects 2, will get two options, if he/she selects two options but then changes his/her mind and decides only wants 1, the field disappears but the value is still getting send when submit.
this is the fiddle
jsfiddle.net/U3pVM/13524/
and the javascript part
function chip($scope) {
$scope.formData = {
'sim' : {
'0' : null,
'1' : null,
'2' : null,
'3' : null
}
};
$scope.simQuantity = 1;
$scope.simOptions = [1,2,3,4];
$scope.sims = [
'Mini-SIM',
'Micro-SIM',
'Nano-SIM',
];
}
You can clean the data during ng-change to remove the extra properties.
I have cleaned up your jsfiddle that was not working and implemented a solution:
http://jsfiddle.net/k1m3cd60/
code:
$scope.clean = function(n) {
for (var i = 4; i >= +n; i--) {
delete $scope.formData.sim[i];
}
};
html:
ng-change="clean(simQuantity)"
I've been struggling on this for a while... I'm currently using Angular.
Let's say we have five select option fields and that we are iterating through the same list for each one.
Our options are:
$scope.items = [one, two, three, four, five];
If I choose one, how would I disable the selected option for the remaining select option fields?
And if I go to another select option field and select an available item, it then disables that item for all the other fields.
Any help or even guidance on how to do this would be appreciated. Thanks
There are two possible solutions that you may want, and it depends on what kind of disabling your specs require.
Disable by removing the items that are already selected from other select elements. This solution requires a filter that removes the items that has already been selected except for the current item that the current select tag has selected.
DEMO
Javascript
.controller('Ctrl', function($scope) {
$scope.items = [1,2,3,4,5];
$scope.data = [];
})
.filter('arrayDiff', function() {
return function(array, diff) {
var i, item,
newArray = [],
exception = Array.prototype.slice.call(arguments, 2);
for(i = 0; i < array.length; i++) {
item = array[i];
if(diff.indexOf(item) < 0 || exception.indexOf(item) >= 0) {
newArray.push(item);
}
}
return newArray;
};
});
HTML
<select
ng-repeat="(modelIndex, itemValue) in items track by modelIndex"
ng-model="data[modelIndex]"
ng-options="item for item in $parent.items | arrayDiff:data:data[modelIndex]">
<option value="">Select Number</option>
</select>
Disable by setting a disabled property to the option items, this is actually a complex way of solving the problem as it does not use the standard angular select ng-option syntax. By using an ng-repeat to iterate over items and add an ng-disabled expression that evaluates the current selected item against other selected items from other select elements.
DEMO
Javascript
.controller('Ctrl', function($scope) {
this.items = ['1', '2', '3', '4', '5'];
this.data = [];
})
.filter('hasIntersection', function() {
return function(item, array) {
return array.indexOf(item) >= 0;
};
});
HTML
<select
ng-repeat="(selectIndex, itemValue) in Demo.items"
ng-model="Demo.data[selectIndex]">
<option value="" ng-selected="Demo.data[selectedIndex] == item">
Select Number
</option>
<option ng-repeat="item in Demo.items"
value="{{item}}"
ng-disabled="item | hasIntersection:Demo.data"
ng-selected="Demo.data[selectIndex] == item">
{{item}}
</option>
</select>
ng-disabled is your friend here, however I think you may face some problems with dynamic selects in IE.
http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview
You can use ng-disabled.
<select ng-options="item in items" ng-model="selectedItem" ng-disabled="selectedItem"></select>
Working example here: http://jsfiddle.net/astrojason/4njwhdua/