Angularjs select with count of filtred elements - javascript

I want to create select, which show count of elements in filter. Seems like that
Here is PlunkR with code, that i have wrote. It's great make his job, but i cannot add count of active/deactive elements in select. How can I do this?
Thank's

You can format the values before binding with the select options.
<select ng-options="i as format(i) for i in statusList" ng-model="statusFilter">
</select>
The format function is,
$scope.format = function(val) {
return val.status + ' ' + $scope.objs.filter(function(state) {
return state.status === val.value;
}).length;
}
Where the $scope.objs is the array of values which has active/inactive items.
Here is the working plunkr

Related

Jquery option select value matches with values in array

I have a select field with all countries listed. The option val is the country code so for the United States the option value is US.
I have a few products in a list which each have a unique country codes assigned to them in the html such as:
<div class="restricted-items" data-countries="["TR","UA","AE","GB","US"]"></div>
<div class="restricted-items" data-countries="["GB","US"]"></div>
etc
What I am trying to do is that when on change event the option value is US, it finds that value in the array show shows text. The trouble i am having is that the text will show for all classes with "restricted-items"
My code or attempt is:
$(document).on('change', '.fieldset.estimate.select[name="country_id"]', function() {
var blacklistCountries = JSON.parse(jQuery('.restricted-items').attr('data-countries'));
console.log($(this).val());
console.log(blacklistCountries);
if($.inArray($(this).find(':selected').val(), blacklistCountries) > -1){
$('.restricted-items').text('This item cannot be shipped to ' + $(this).find(':selected').attr('data-title'));
} else {
if ($('.restricted-items').text().length > 0) {
$('.restricted-items').empty();
}
}
});
Any help will be great thanks

Initializing select value in nested ng-repeat

I'm having trouble properly initializing the select boxes in a form, built with nested ng-repeats. I have parent table rows built with an ng-repeat, and a select box whose value is bound to an attribute in the parent row. The values in the select box are pulled from a nested child array, constituting available selections for the row.
<tr ng-repeat="asv in asvs">
<td>{{asv.scenario_asv_id}}</td>
<td>{{asv.asv_target_id}}</td>
<td><select ng-model="asv.asv_target_id">
<option ng-repeat="version in asv.asv_targets"
value="{{version.asv_target_id}}"
ng-selected="asv.asv_target_id == version.asv_target_id">
ID: {{version.asv_target_id}} - Name: {{version.asv_target_desc}}
</option>
</select>
</td>
</tr>
In my Plunker, you'll see that the first 2 selects initialize properly, yet the 3rd does not. Can someone advise how to implement this properly?
https://plnkr.co/edit/NGcEMNSHCDAYK8UBOKYl
It is recommended that you use ng-options with select elements. Please replace your select code with the example below:
<select convert-to-number
ng-options="version.asv_target_id as ('ID: ' + version.asv_target_id + ' - Name: ' + version.asv_target_desc) for version in asv.asv_targets track by version.asv_target_id"
ng-model="asv.asv_target_id">
</select>
Because your value is numeric you will have to add the following directive as per https://code.angularjs.org/1.4.7/docs/api/ng/directive/select
module.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return val != null ? parseInt(val, 10) : null;
});
ngModel.$formatters.push(function(val) {
return val != null ? '' + val : null;
});
}
};
});
The problem happening here is during the creation of select options using ng-repeat
{
"scenario_asv_asv_target_id": "16150-CI101592-3475",
"scenario_asv_id": 16150,
"appl_ci_id": "CI101592",
"asv_target_id": 3475,
"asv_target_desc": "Default General Purpose",
}
If you move your data which are going to match your criteria to the end of the json, your value will get selected.
Because in the loop the select option is getting created,so it resets the already created ng-select values.
For example, I have moved the option which are going to be by default to the end of json set and the value is getting selected.
This is not recommended, for understandging.
Check into the plunker:
https://plnkr.co/edit/G83l6OdIfr5vlNgMSeR7?p=preview
I haven't edited your code, i have just replaced your data set.
So,
you should use ng-options as follows
<tr ng-repeat="asv in asvs">
<td>{{asv.scenario_asv_id}}</td>
<td>{{asv.asv_target_id}}</td>
<td>
<select ng-model="asv.asv_target_id"
ng-options="version.asv_target_id as version.asv_target_desc for version in asv.asv_targets"
ng-selected="true">
</select>
</td>
</tr>
final code
https://plnkr.co/edit/w8nOENAiL72SX68L7LVv?p=preview
disclaimer:
I have concentrate on explaining and helping you to select default option, so don't expect me to prettify the option data by appending data and desc in it. Do it on your own.

angularjs - remove option from input select

Can't figure this out for the life of me. Using AngularJS.
I have a dropdown Select field with several options. It is a part of a form that may be completed multiple times (ie "add another" type form). Now, one of the options may only be used once. How can I remove this option from all other select fields after it has been used?
What I'm working with:
html
<select ng-model="item.itemtype">
<option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>
angularjs
$scope.Items = [
{ 'itemtype': '', 'desc': '', 'color': '' }
];
$scope.itemtype = [
'shirt',
'pants',
'hats',
'shoes',
'special'];
What I've tried (and really doesn't work)
$scope.specialremove = function() {
var exist = Items.indexOf("special")
if (exist !== 0) {
return '';
}
else {
return 'special';
}
}
I'm hoping I don't have to turn to any other framework to solve this. Feel free to point out any other problems/errors/inefficiencies in my code.
The first thing that can help is using ng-options:
ng-options="type for type in itemType".
It would be better to have objects with label and value properties, in order to write it as
ng-options="type.value as type.label for type in itemType"
and separate the displayed label from the actual value of the selection.
In your controller you should have something like:
$scope.itemType= [
...
];
$scope.selectedItem= $scope.itemType[0];
So that you can write the select as:
<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>
To remove a selected item you can watch the value of selectedItem in the controller: when it matches the value you want, remove it from the array and update selectedItem accordingly.
Here is a basic fiddle. I simply remove the third option after selecting it, and reset the selected item to the first.

get list of selected items from select box in javascript

i am using a multi select box in javascript as given here:
i want to get the list of selected items in the multi select text box (the left list)
what can i do to achieve that?
my select box is as follows:
<select id="userList" class="multiselect" multiple="multiple" name="users[]" style="width: 75px;">
//List
</select>
i guess users[] stores the selected users at a point in time. but i can't figure out how to retrieve that variable.
Doing this will work:
$('[name="user[]"]').val()
PS: You need to have jQuery included in your webpage.
from the demo at http://www.quasipartikel.at/multiselect/, doing $('[name="countries[]"]').val() will give sample output:
["ARM", "AUS", "AUT"]
Get a list of values with jQuery:
var values = $select.find('option:checked').map(function() {
return this.value || this.text;
});
// or $select.val() of course, like lemarc says
// => ['ABC', 'DEF']
var prefix = encodeURIComponent($select.attr('name')) + '=';
var httpQuery = values.length ? prefix + values.map(function() {
return encodeURIComponent(this);
}).join('&' + prefix);
// => users[]=ABC&users[]=DEF
I didn't test it.
This will return array of selected values
$('#userList').val();
DEMO
You can directly target $(".multiselect") Object, by doing this:
$("input[type='submit']").click(function(e){
e.preventDefault();
_selValue = $(".multiselect").val(); //You will have variable of selected values
for(var i=0;i<_selValue.length;i++){
alert(_selValue[i]);
//You can iterate it individually in loop
}
});

How to select option value from select tag using jquery

sorry guys, previously I didn't mention the my dropdown list is made with bootstrap. based on #rps suggestion I asked to my colleague(who is made template) he said it's made with bootstrap.
I am putting basic html dropdown code,so I think you guys can understand How bootstrap code will be.
html code:
<select name="primary" class="select-block" id="select_alert">
<option "selected">Choose Alert T</option>
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
</select>
Initially i am getting the select menu in the following way.
for my conformation,I am finding the menu value in the following way.
i/p: document.getElementById('select_alert').value
o/p: "choose Alert T"
Now using javascript or jquery, I want to change select option in the follwoing way.For this I tried the below it's not working
document.getElementById('select_alert').value="T1";
Again If I check the value of select menu,it should be "T1".
Thanks
you can try this
// Get the value from a dropdown select
$( "#select_alert option:selected").val();
$( "#select_alert option:selected" ).text();
My reading of the question is ambiguous, but if you're trying to set the value, or set the selected-option, to T1:
$('#select_alert option[value="T1"]').prop('selected',true);
JS Fiddle demo.
If you're trying to retrieve the value of the selected option:
$('#select_alert option:selected').val();
Using jQuery you can just do this:
$('#select_alert').val('T1');
Demo : Fiddle
use as follows :
$('#select_alert').val('T1'); // in jquery
also your javascript code is correct, there must be some other error on the page.
without jquery you can use
document.getElementById('select_alert').selectedIndex = 1
http://jsfiddle.net/uzqZA/1/
if you want to find out the option index by given value try this
var sel = document.getElementById('select_alert'),
selopt = sel.options,
searchidx;
//alert(selopt[sel.selectedIndex].value);
//sel.selectedIndex = 1;
//alert(selopt[sel.selectedIndex].value);
//alert(sel.value)
// search for the index
searchidx = getoptidx(selopt, "T3");
if (searchidx !== false) {
sel.selectedIndex = searchidx;
alert(selopt[sel.selectedIndex].value);
} else {
alert("index not found")
}
/**
* returns the index of a value
* #todo optimize search?
*/
function getoptidx(opts, searchterm) {
for (var i in opts) {
if (opts[i].text === searchterm) return i;
}
return false;
}
the fiddle: http://jsfiddle.net/uzqZA/6/
Try to do it this way :
$('#select_alert').val("T3");
$("#select_alert").selectmenu();
$("#select_alert").selectmenu("refresh");

Categories

Resources