<tbody id="table">
<tr data-ng-repeat="consulting in consultingsVm.consultings">
<td>
<a href="" class="mode mode--edit"
data-ng-click="isModeEdit = !isModeEdit"
data-ng-if="!isModeEdit"><span
class="mode__item">{{consulting.description}}</span><i
class="mode__icon icon-mode_edit"></i></a>
<div data-ng-if="isModeEdit">
<input type="text" class="input input--edit" data-ng-model="consulting.description">
<a href="" class="button button--rounded"
data-ng-click="consultingsVm.update(consulting)"><i
class="icon-check text--green"></i></a>
<a href="" class="button button--rounded" data-ng-click="isModeEdit = false"><i
class="icon-arrow_forward"></i></a>
</div>
</td>
<td class="text--right">
<a href="" class="button button--delete"
data-ng-click="consultingsVm.deleteConsulting(consulting)">Delete</a>
</td>
</tr>
</tbody>
I want to define variable isModeEdit for every consulting in consultingsVm.consultings. How can i do that?
where do you get the consultingsVm.consultings from.
before u send it to front you could just add the values to it.
then use consulting.isModeEdit
Related
I am using the angular material 12 version drag and drop feature. I have two connected divs while dropping the item I want to identify whether the source (item dragged container) container and target container(item dropped container) are the same or not.
Thanks in advance. please find below the code
<div class="toc_listing" cdkDropList [cdkDropListData]="table_list" [cdkDropListConnectedTo]="table_toc"
#list_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<p *ngFor="let item of table_list" cdkDrag>
<span class="icons"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<span class="list-no">{{item.tableNo}}</span>
<span class="list-name">{{item.name}}</span>
</p>
</div>
<div class="table responsive-table">
<table class="table">
<thead>
<td>t.no</td>
<td>name</td>
<td>type</td>
<td>population</td>
<td>actions</td>
</thead>
<tbody cdkDropList [cdkDropListData]="toc_list"
#table_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<tr *ngFor="let item of toc_list" cdkDragLockAxis="x" cdkDragLockAxis="y" class="dragdrop_table">
<td>{{item?.tlfTocMasterDto?.tableNo}}</td>
<td (click)="viewEditor(item)" data-toggle="tooltip" [matTooltip]="item.selected ? 'Edit Mockshell':'Mockshell is not selected'">{{item?.tlfTocMasterDto?.name}}</td>
<td>{{item?.tlfTocMasterDto?.tableType}}</td>
<td>{{item?.tlfTocMasterDto?.population}}</td>
<td>
<p class="edit" data-bs-toggle="modal" data-bs-target="#editTableOfContent" *ngIf="!item.selected" (click)="editTable(item)"><i class="fa fa-pencil" aria-hidden="true"></i>
</p>
<p class="delete" (click)="deleteTable(item, $event)" *ngIf="!item.selected"><i class="fa fa-trash-o" aria-hidden="true"></i></p>
</td>
</tr>
</tbody>
</table>
</div>
The CdkDragDrop parameter contains the container (dropped container) and previousContainer which you can compare directly
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
...your logic
}
}
I want to create edit data on laravel using a modal for view .
but i dont know how to catch one data on on my edit form .
i build controller like edit data on another page ( not using modals )
public function index()
{
$ipsrs = DB::table('ipsrs')->pluck('nama_bagian','id');
$belum_kerjakan = Aduan::with('users')->where('status','Belum Dikerjakan')->get();
$dalam_proses = Aduan::with('users')->where('status','Sedang Dikerjakan')->get();
$selesai = Aduan::with('users')->where('status','Selesai')->get();
return view('admin.admin_dashboard',[
'belum_dikerjakan' => $belum_kerjakan,
'dalam_proses' => $dalam_proses,
'selesai' => $selesai,
'ipsrs' => $ipsrs,
]);
}
public function change_aduan($id)
{
$aduan = Aduan::findOrFail($id);
if (!$aduan)
abort(404);
return view('admin.admin_dashboard',[
'aduan' => $aduan
]);
}
this route . ( but i dont know where i used this route ?
Route::get('admin_dashboard', 'AdminController#index')->name('admin_dashboard'); // this route for view table
Route::get('change/{id}','AdminController#change_aduan')->name('change_aduan'); // this route "will" showing data on this modals
my View
<div class="card-body" align='center'>
<div class="card-body p-0">
<table class="table table-condensed">
<thead align="center">
<tr class="satu">
<th style="width: 3%">#</th>
<th style="width: 10%">Nama Unit</th>
<th style="width: 15%">Tanggal Aduan</th>
<th style="width: 8%">Nama Pengadu</th>
<th style="width: 8%">Tujuan Aduan</th>
<th style="width: 30%">Isi Aduan </th>
{{-- <th>Label</th> --}}
<th style="width: 5%">Status</th>
<th style="width: 5%">Action</th>
</tr>
</thead>
<tbody>
#php
$no=0;
#endphp
#foreach ($belum_dikerjakan as $i)
<tr>
<td> {{++$no}} </td>
<td> {{$i->users->nama_unit}}</td>
<td> {{$i->created_at}} </td>
<td> {{$i->nama_pengadu}} </td>
<td> {{$i->ipsrs->nama_bagian}} </td>
<td> {{$i->aduan}}</td>
<td><span class="badge bg-danger"> Belum Dikerjakan</span></td>
<td><button type="button" class="btn btn-default" data-toggle="modal" data-id="{{$i->id}}" data-target="#modal-lg" > // modals button
Action
</button></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Change Status </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{-- Here this Form --}}
{{-- {{$aduan->nama_pengadu}} --}} // this Line is failur
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
i dont know how to next step , on another tutorial this data is can showed using {{ $data->name }} , but in my view cant do this . whats wrong ,and how i can solved this ?
I think you are not far off. I believe the issue you are having is that you are trying to pull the name field from a collection instead of an object.
In your Blade file, this line:
<td> {{$i->users->nama_unit}}</td>
is essentially saying: for this iteration ($i) of $belum_dikerjakan, give me ALL the users and tell me the name of the collection of users. The collection doesn't have a name field. Because you have many users for this $belum_dikerjakan, you will either need to loop on all of them, identify the specific user by id (example $i->users->where('id', 1)->first()->nama_unit), or take the first one randomly:
$i->users->first()->nama_unit
What these examples do, is it pulls a single object user instead of a collection, and thus you have the field name on that object.
This line:
<td> {{$i->ipsrs->nama_bagian}} </td>
doesn't look like a relationship at all, and you may need to refactor this into either a relation on $belum_dikerjakan, or remove it from the loop and use it independently, but this is a separate issue I think.
Hope this helps.
I am using following bootstrap menu items with My laravel application,
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span> Content Management</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and using this menu bar with #include('menubar) with other blade files. now I need highlight current menu item when I visit each pages. how can I do this?
use
{{ request()->route()->getName() }}
or
{{ route()->currentRouteName() }}
then you can do something like
<a class="{{ request()->route()->getName() === "brands.index" ? "active" : "not-active" }}">
You can use this package I've written to do this: https://packagist.org/packages/arcesilas/active-state
Example with your code:
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
This package also allows you to check a url, a route with given parameters or a query.
I am using ERB templating in Sinatra to display a table of data.
How can I use jQuery to get table data of a specific row when I click the EDIT button without having to assign specific class or ids to each <td> or <tr>?
<table>
<tr>
<td>question</td>
<td>answer</td>
<td>edit</td>
</tr>
<tr>
<td>What is a carrot?</td>
<td>A vegetable</td>
<td>
<a id="editbutton" class="btn btn-default" onclick="editModal()" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
</td>
</tr>
<tr>
<td>What does HTML stand for?</td>
<td>Hyper Text Markup Language</td>
<td>
<a id="editbutton" class="btn btn-default" onclick="editModal()" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
</td>
</tr>
</table>
UPDATE:
I have managed to get the following to get the value in the nearest <td>
$('.editbutton').click(function(e) {
var output = $(this).closest('tr').find('.as').text();
alert(output);
});
but I need values from both table data cells in that row. Any ideas?
Jquery .closest() , check API https://api.jquery.com/closest/
just wondering if anyone knows how i can get an angular expression from within the ng-repeat, in the same object. eg
<!..This is the abgpankit..>
<div ng-repeat="equip in portal[0].equipment[0].sub" id="{{equip.id}}" class="displaydiv">
<div class="contentimg">
<h3>{{equip.item}}</h3>
</div>
<a ng-repeat="x in equip.links" href="#pdfdiv" onclick ="return iframeSrc("{{x.links}}");">
<li>{{x.desc}}</li></a>
<div class="information">
<p>{{equip.info}}</p>
</div>
<div class="items">
<table>
<tr>
<th>Items in Kit</th>
</tr>
<tr>
<td class="icons">
<a href="#panharness" class="panharnessicon">
<div class="iconimg">
<h2>Pan Harness</h2></div></a>
</td>
<td class="icons">
<a href="#displaymodule" class="displaymodicon">
<div class="iconimg">
<h2>Display Module</h2></div></a>
</td>
<td class="icons">
<a href="#halo" class="haloicon">
<div class="iconimg">
<h2>Halo</h2></div></a>
</td>
<td class="icons">
<a href="#edm" class="edmicon">
<div class="iconimg">
<h2>EDM</h2></div></a>
</td>
<td class="icons">
<a href="#dm" class="dmicon">
<div class="iconimg">
<h2>DM</h2></div></a>
</td>
<td class="icons">
<a href="#sft" class="sfticon">
<div class="iconimg">
<h2>SFT</h2></div></a>
</td>
</tr>
</table>
</div>
</div>
Sorry just changed it to the actually code from the site. I believe i have the syntax right, i just though there might be some limitation using an expression in the same object the ng-repeat is defined in.
Once i sort this out i can move further down and fix things up.
Cheers,
Mitchell