in my angular application i have a list of schedule objects in schedule array that are displayed using ngFor.
i want that whenever i click the checkbox on the left of my schedule box that particular schedule is selected as current schedule and rest is set to false .
i also want that my default selected schedule is the one that is most recently added to the array.
here is my HTML code
<div class="Box" *ngFor="let schedule of availableSchedules">
<div class="row width100">
<div class="col-md-1">
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
</div>
<div class="col-md-11">
<div class="row width100" style="font-size: larger;">
<div class="col-md-4">
From : <span>{{schedule.startTime}}</span>
</div>
<div class="col-md-4">
To : <span>{{schedule.endTime}}</span>
</div>
<div class="col-md-2"></div>
</div>
<label for="days" style="font-size: larger;">Days</label>
<div class="row" name="days" style="margin-top: 5px;padding-left: 5px;">
<span class="chip" *ngFor="let day of schedule.days">{{day}}</span>
</div>
</div>
</div>
</div>
here is my ts code
currentSchedule = new tutorAvailablitySchedule();
availableSchedules: tutorAvailablitySchedule[] = [];
selectSchedule(schedule:tutorAvailablitySchedule) {
this.currentSchedule = schedule;
console.log(event);
}
That you should do the job:
<input type="checkbox"
[ngModel]="schedule===currentSchedule"
(ngModelChange)="selectSchedule($event ? schedule : null)" />
If you need to prevent an empty selection, you should use a radio button instead. In that case, you don't event need to define the selectSchedule function:
<input type="radio" name="schedule"
[value]="schedule"
[(ngModel)]="currentSchedule"/>
Related
I have an issue with Laravel. I have a page where two fields are given; one is a select option in which two parameters are given (name, PRN). Below this, I have an input field and submit button.
When the user writes the name in the input field and searches. It should get data from that user on the next page in table format.
receipt.blade.php
<body>
<div class="form_design">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<h1 class="mt-0 text-center mb-4 text-white">Get Receipt</h1>
<p style="text-align: left; margin-bottom: 0px !important;">
Home </p>
<div class="boxed_shadow">
<h5><span class="question-label active">Search your transactions for Receipt</span></h4>
<form action="{{url('/')}}" id="submit_form" method="POST" >
#csrf
<div class="alert alert-danger" id="RegisterAlert" role="alert" style="display:none">Record not found.</div>
<div class="form-group">
<select class="form-control" id="tran_type">
<option value="pg_res_txn_id">PRN</option>
</select>
</div><!-- /input-group -->
<div class="form-group">
<label><span class="star_vld">*</span>Search Based On PRN</label>
<input type="text" class="form-control" id="MainContent_TextBoxEmpId">
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-sm px-5" id="MainContent_ButtonSearch" value="Search" style="background-color: #c2d3c8;font-size: 14px;font-weight: 600;">
</form>
<form id="receipt_list" method="POST" style="display:none" >
<table id="rec_list" border='1' class="table">
</table>
</form>
</div>
</div>
</div>
</div>
</div>
ReceiptController.php
class ReceiptController extends Controller
{
public function index()
{
return view('receipt');
}
}
Please give me the solution for this. If anyone wants more data, I can share it with you want to get data based on search and display it on the next page. Data should be from the database; my table name is 'form2s'.
I didn't get the result. I tried but did not get a result.
I have been working on Laravel for the last three months.
Using JQuery I would like to check the value of an input, if it equals Complete I would like to add the Bootstrap class is-valid to that input, and all the other inputs on the same row.
Something like this (pseudo code);
if wb_status_reg = Complete {
// add is-valid to all row inputs / select boxes
}
I should note that sometimes the row will contain a select box, not just text inputs. Also, I'm unable to edit the html as it's being generated by a form builder component (in a CMS).
My code is currently working but I know it's too long and could be improved. In my code i'm showing one form-row but I actually have many more, so I need to duplicate this a few more times.
How can I achieve this in a more efficient way?
jQuery(document).ready(function($) {
var wb_stage_reg = $('#wb_stage_reg');
var wb_status_reg = $('#wb_status_reg');
var wb_date_reg = $('#wb_date_reg');
setIsValid($);
});
function setIsValid($) {
wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
Something like this:
You need to change ID to class on all fields
Since you cannot, I use the name instead:
$(function() {
$("[name='form[wb_status_reg]']").each(function() {
const $parent = $(this).closest(".form-row");
const complete = this.value === "Complete";
$parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
})
});
.is-valid { color:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
I want to pass 3 values (2 dropdown's and 1 input field) from one page to another.User will select 2 dependent dropdowns after clicking on the button user will redirect to another page where he will ask to fill-up a form wherein above 3 details will be auto-filled.
The input field's data is passing to another page but the 2 dropdown's value are not passing.
Controller
public function getRequestDetails(Request $request){
$reqAOP = $request->get('areas');
$reqType = $request->get('request_type');
$reqTitle = $request->get('title');
Session::put('areas', $request->get('areas'));
return redirect('frontend_template.submitquery')->withInput($request->only('title'));
}
Blade page
<div class="col-md-6 float-container">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="aops" class="form-control select2-list">
<option value="{{Session::get('areas')}}" selected>{{Session::get('areas')}}</option>
</select> </div>
</div>
<div class="col-md-6" style="height:33px;color: grey;display: none;width: 49%;line-height: 1;" id="req_options">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="request_type" class="form-control select2-list" >
</select>
</div>
</div>
</div>
<br>
<div class="row form">
<div class="col-md-12 float-container">
<div class="form-group">
<input type="text" placeholder="Title *" style="margin-top: 10px;padding-left: 10px;font-size: 16px;" class="form-control" name="title" id="title" value="{{old('title')}}">
</div>
</div>
</div>
You can create a button like this to pass the value to next request/page
<a href="{{route('route_name',['area'=>'$variable','request_type'=>'$variable','title'=>''])}}"
class="btn btn-primary" style="text-decoration:none">
<i class="fa fa-folder-open"></i>Manage
</a>
In route you just need to declare the path like
Route::get('blade_path/{area}/{request_type}/{title}','Controller#function')->name('route_name');
I have to add element as per the data coming from mssql server in the following area :
<div id="ApplicationForm" class="tabcontent" style="display:none;">
<div class="tab_section">
<div class="container">
<div class="row">
<div class="col-lg-12" style="font-size:16px;">Application Form</div>
<div class="col-lg-12">
<div class="" style="width:100%;border-bottom:1px solid #ddd;padding-top:5px;margin-bottom:10px;"></div>
</div>
</div>
<div ng-bind-html="applnformdata"> //from here on the data should be dynamic
</div>
</div>
</div>
</div>
</div>
</div>
(Sorry if I left any ending div tag).
On click of a button I'm calling a function in angularJs
$scope.dynamicdata=function(){
Method.getbyId("xxxxxxxxxxxx", Id).then(function (response) {
var newEle = '';
for ( i = 0; i < response.data.length;i++){
newEle += "<div class='form-group col-lg-6'>< label class='form_lable' >" + response.data[i].fieldName + "</label ><div class='m_settings_cell'><input type='checkbox' class='m_switch_check' value='1' entity='Test 1'></div></div>"; //when I try to do this it doesnot loads the <label> tag at all
}
$scope.applnformdata = newEle;
}).catch(function (data) {
console.log("access not allowed");
});
}
and I have some entries coming from mssql which have "label name" and checkbox values . How can I make this part to generate dynamically ? Like if 10 entried come then 10 data will be shown , if 5 then 5 and so on ? Please help.
Rather than appending the "div" and using default jquery checkbox, made own switch and used it.
<div class="row">
<div class="form-group col-lg-6" ng-repeat="x in apform">
<div class="col-lg-6">
<label class="form_lable">{{x.fieldName}}</label>
</div>
<div class="col-lg-6" align="right">
<label class="switch">
<input id="{{x.id}}" class="switch-input" type="checkbox" ng-model="x.fieldOption" ng-click="check(x.id)" />
<span id="data_{{x.id}}" class="switch-label" data-on="" data-off=""></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
I have a component that is being for-looped. When I click one (app-product-card), I want its corresponding checkbox to be true or checked. How do I do that? I have this html
<div class="list-content fluid">
<div class="products-cards" *ngFor="let product of dataSource['docs']">
<div class="ui checkbox">
<input class="singleCheckbox" type="checkbox" [checked]="product">
<label hidden></label>
</div>
<app-product-card [product]="product" (click)="select(product)"></app-product-card>
</div>
</div>
You use local reference of child component like I did below:
<div class="list-content fluid">
<div class="products-cards" *ngFor="let product of dataSource['docs']">
<div class="ui checkbox">
<input class="singleCheckbox" type="checkbox" [checked]="appProduct.product===product"> // Here you need match your currently selected product
<label hidden></label>
</div>
<app-product-card #appProduct [product]="product" (click)="select(product)"></app-product-card>
</div>
</div>
App Product Comp: TS
public product;
select(product){ this.product = product;}