I'm using a array iteration to know which is the selected option. I'm insterested on id atribute of result. is there other way?
<input type="text" list="products" ng-model="query" />
<datalist id="products">
<option value="{{result.name}}" ng-repeat="result in results" >
</datalist>
...
$scope.search = function (query) {
$scope.results.forEach(function (result) {
if (result.name === query) {
// code here
}
}
}
...
Try this:
<datalist id="products">
<option value="{{result.name}}" ng-selected="query.id == result.id" ng-repeat="result in results" >
</datalist>
Related
I want my code to send the variable from onChange to useState here's my code at for displaying my table on each row
const dataTableElements = entireListData
.slice(0, maxRow)
.map((entireListData, index) => {
var dotStatus = null;
if (entireListData.PriceStatus == true) {
dotStatus = <GreenDot>{entireListData.Price}</GreenDot>;
} else {
dotStatus = <RedDot>{entireListData.Price}</RedDot>;
}
return (
<Tr data-index={index}>
<Td>{entireListData.no}</Td>
<Td>{entireListData.BillNo}</Td>
<Td>{entireListData.Product}</Td>
<Td>
<StatusTableBox>{dotStatus}</StatusTableBox>
</Td>
</Tr>
);
});
next is my select tag
return (
<div>
<Tabbar />
<div>
<p>
Show
<select
value={entireListData.no}
onChange={() => {
sendCurrentRow(entireListData.no);
}}
>
{rowTableElement}
</select>
Entires
</p>
</div>
from the result of the above, it shows in console "undefined".
Usually the select tag gives an event in the onChange method that you can use to extract the value which selected, take a look at this example:
<select
value={entireListData.no}
onChange={(event) => {
sendCurrentRow(event.target.value);
}}
>
//here should be your options with different values
<option value="1">
1
</option>
<option value="2">
2
</option>
// I don't know this value has the option or not => {rowTableElement}
</select>
Bootstrap multisleect has option for select all (for example here). Is this possible in materialize multi select?
Here is a smaller version: https://codepen.io/souvik1809/pen/rvNMyO
HTML
<div class = "row">
<label>Materialize Multi Select</label>
<select multiple class="select_all">
<option value="" disabled selected>Choose your option</option>
<option value = "1">Mango</option>
<option value = "24">Orange</option>
<option value = "3">Apple</option>
<option value = "4">Cucumber</option>
<option value = "5">Litchi</option>
</select>
</div>
JavaScript
$(document).ready(function() {
// $('select').val([1]);
$('select').formSelect();
$('select.select_all').siblings('ul').prepend('<li id=sm_select_all><span>Select All</span></li>');
$('li#sm_select_all').on('click', function () {
var jq_elem = $(this),
jq_elem_span = jq_elem.find('span'),
select_all = jq_elem_span.text() == 'Select All',
set_text = select_all ? 'Select None' : 'Select All';
jq_elem_span.text(set_text);
jq_elem.siblings('li').filter(function() {
return $(this).find('input').prop('checked') != select_all;
}).click();
});
});
You can add them like this:
https://codepen.io/anon/pen/XgEbRL?editors=1010
HTML:
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
<a class="btn" onClick="javascript:selectAll()">Select all</a>
<a class="btn" onClick="javascript:selectNone()">Select none</a>
JavaScript:
var activateOption = function(collection, newOption) {
if (newOption) {
collection.find('li.selected').removeClass('selected');
var option = $(newOption);
option.addClass('selected');
}
};
$(document).ready(function() {
$('select').material_select();
$('.test-input > .select-wrapper > .select-dropdown').prepend('<li class="toggle selectall"><span><label></label>Select all</span></li>');
$('.test-input > .select-wrapper > .select-dropdown').prepend('<li style="display:none" class="toggle selectnone"><span><label></label>Select none</span></li>');
$('.test-input > .select-wrapper > .select-dropdown .selectall').on('click', function() {
selectAll();
$('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
});
$('.test-input > .select-wrapper > .select-dropdown .selectnone').on('click', function() {
selectNone();
$('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
});
});
function selectNone() {
$('select option:selected').not(':disabled').prop('selected', false);
$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').prop('checked', '');
//$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').trigger('click');
var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:disabled').parent().text();
$('input.select-dropdown').val(values);
console.log($('select').val());
};
function selectAll() {
$('select option:not(:disabled)').not(':selected').prop('selected', true);
$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').prop('checked', 'checked');
//$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').trigger('click');
var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').parent().map(function() {
return $(this).text();
}).get();
$('input.select-dropdown').val(values.join(', '));
console.log($('select').val());
};
I have the following ng-repeat:
<select class="action-dropdown fade" ng-model="item_value">
<option value="" disabled>Choose an Step</option>
<option ng-repeat="step in steps | orderBy:'+step_number'" ng-if="step.step_number >= active_step" value="{{$index}}">Step {{step.step_number}}</option>
</select>
I am attempting to change this to an ng-option because the following option is popping up and I think this might fix the issue:
<option value="? string:5 ?"></option>
I'm trying to wrap my head around how to include my ng-if statement with the ng-option and to use the word Step $index when displaying the option.
The comprehension expressions are just blowing my mind and I was wondering if anyone could help me out.
This is what I have so far:
<select class="action-dropdown fade" ng-model="item_value" ng-options="$index as step.step_number for step in steps" required>
<option value="" disabled>Choose a Step</option>
</select>
look the snipped as I've commented
I think that the best way (cleaner way) is populate the steps list on change active_step. To access the index you can use the (key,value) syntax
select as label for (key , value) in object
Doc: https://docs.angularjs.org/api/ng/directive/ngOptions
angular.module('app', [])
.controller('DefaultController', function () {
this.item_value = null;
this.steps = [
{ step_number: 5 },
{ step_number: 2 },
{ step_number: 6 },
{ step_number: 3 },
{ step_number: 1 },
{ step_number: 4 },
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div data-ng-controller="DefaultController as ctrl">
<select ng-model="ctrl.item_value" ng-options="step as 'Step ' + index for (index, step) in ctrl.steps | orderBy:'+step_number'" required>
<option value="" disabled>Choose a Step</option>
</select>
Selected: {{ ctrl.item_value }}
</div>
</div>
Hi Im trying to list the items selected from the drop-down box and display it in a table using angularjs.So here is the code,
https://plnkr.co/edit/8qCgB2flMGB89moppkz6?p=preview
abc.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr>
<td>{{list}}</td>
<td>{{carlist}}</td>
</tr>
</table>
abc.js
var app = angular.module('carService', []);
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
I have also attached image, how my final result is displayed.
here all the items in list once submitted are overlapping in the same row.
So, please help me to properly display the table and also on submitting the selected item from drop down I want them to be one below the other.
please check this working plunkr
The following are the code modified
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz}}</td>
<td>{{carlist[$index]}}</td>
</tr>
</table>
i want to ask. I'd already search about angularjs filter but havent found yet what is the solution for mine. I use angular for make android app with IONIC framework.
I have data with price. I want to filter it by price range.
ex:
name type price
item01 fruit 25000
item02 vegetable 50000
item03 vegetable 10000
I have 2 select box for filtering
<select ng-value="fprice">
<option value="">All</option>
<option value="0">0-24999</option>
<option value="25000">25000-49999</option>
</select>
<select ng-value="ftype">
<option value="">All</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
I want if i select the second value (price) then item02 didnt show.
I have code like
<ion-list>
<ion-item ng-repeat="item in items | filter: { type: ftype, price: ??? }">
{{item.name}}<br>
{{item.type}}<br>
{{item.price}}
</ion-item>
</ion-list>
What is the code for my ??? in my code? I have try some but still dont find what I looking for.
Thank you. Sorry for bad english.
You can create custom filter. I post example on jsfiddle
In filter you can put what you want.
my custom filter
autoDrops.filter('filterCostum', function () {
return function (datas, fprice, ftype) {
console.log(ftype)
var options = [];
angular.forEach(datas, function (data) {
if(ftype != ""){
if (data.type == ftype) {
if(fprice == ""){
options.push(data);
}
else if(fprice == 0){
if(data.price >= 0 && data.price <=24999)
options.push(data);
}
else if(fprice == 25000){
if(data.price >= 25000 && data.price<=49999)
options.push(data);
}
}
}
else{
console.log(fprice)
if(fprice == ""){
options.push(data);
}
else if(fprice == 0){
if(data.price >= 0 && data.price <=24999)
options.push(data);
}
else if(fprice == 25000){
if(data.price >= 25000 && data.price<=49999)
options.push(data);
}
}
});
return options;
}
})
I call like this
<div ng-app="autoDrops" ng-controller="DropsController">
<select ng-model="fprice">
<option value="">All</option>
<option value="0">0-24999</option>
<option value="25000">25000-49999</option>
</select>
<select ng-model="ftype">
<option value="">All</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<div>
<div>
<div ng-repeat="elem in datas | filterCostum: fprice: ftype">
{{elem}}
</div>
</div>
<div>
link edited