I am using this module for angular:
https://github.com/nervgh/angular-file-upload
This is my code which works:
<tr ng-repeat="item in uploader.queue">
<td>
<strong ng-model="test">{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 200 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</td>
</tr>
How can I extract the name of the file without the extension?
What about substring? Something like:
var filename = fullPath.replace(/^.*[\\\/]/, '')
And to get extension:
var ext = item._file.substr(item._file.lastIndexOf('.') + 1);
Related
I'm not too familiar with Angular; I'm trying to use a controller and keep getting this error:
Error: [$controller:ctrlreg] The controller with the name 'MyControllerTest' is not registered.
This is what I put in the html file:
<script type="text/javascript">
var app = angular.module('myAppTest', []);
app.controller('MyControllerTest', function($scope) {
$scope.message = 'Test Message';
});
</script>
<div ng-app="myAppTest">
<div ng-controller="MyControllerTest">
{{message}}
</div>
</div>
I don't have full access to the entire system, I can either edit the html file or add code to the header tag. I tried moving the script section to the header tag with the same result. The site is using AngularJS v1.8.2 Any help would be appreciated!
The entire HTML snippet I'm trying to add this to is:
<style>
.product-details-page {
overflow: auto;
margin-left: 0 !important;
}
.product-details-page .modalContent {
height:auto;
}
#media only screen and (max-width : 986px) {
.product-details-page-image img, product-details-page-content {
width: 100%;
}
.product-details-page {
width:auto;
}
}
</style>
<div class="{{modalClass}} product-details-page" ng-cts-product-page-view="PageView_ProductDetails IncludeOnPage_ProductDetails">
<div class="modal-header product-details-page-header">
<div class="close" ng-show="EnableCloseOrBack()">
<a ng-click='CloseDialog()' href="javascript:" ><span aria-hidden="true" class="icon-cross"></span></a>
</div>
<div class="back" ng-show="(data.IsScreenSizeLimited && data.ConfirmationButtonAction == 2)" ng-show="EnableCloseOrBack()">
<a ng-click="loadKitPage()" href="javascript:" ><span aria-hidden="true" class="icon-arrow-left2"></span></a>
</div>
<div>
<span ng-show="(product!=null && product!=undefined)">{{product._Name}}</span>
<span ng-hide="(product!=null && product!=undefined)">{{getLocalizedString("ProductDetails.ProductUnavailable")}}</span>
</div>
</div>
<div class="modalContent" ng-show="(product!=null && product!=undefined)" ng-style="setProductDetailsHeight(windowHeight)">
<div class="product-details-page-image">
<img ng-src="{{product._DetailImageKey}}" alt="" ng-show="product._DetailImageKey" />
<img src='Images/no-image.png' alt="" ng-hide="product._DetailImageKey" />
</div>
<div class="product-details-page-content">
<div ng-show="product._ShowInventory" class="product-details-inventory">
<span>{{getStringWithVariableData(getLocalizedString("Product.DetailedInventoryCount"),[product._InventoryRemainingDisplay])}}</span>
</div>
<div ng-show="product._ShowPreviewLink" class="product-preview-link">
<span class="label" ng-localize="Shared.Preview"></span>
</div>
<div class="product-details-page-sku">
<span>{{getLocalizedString('Webpart.ProductDisplayItemNo')}}</span><span> {{product._SKU}} </span>
</div>
<div class="product-details-page-description">
<span ng-bind-html-unsafe="product._Description"></span>
</div>
<!-- add product pricing -->
<div ng-show="product._SKU == 'PRO-XXX'">
<!-- gives controller registration error -->
<script type="text/javascript">
var app = angular.module('myAppTest', []);
app.controller('MyControllerTest', function($scope) {
$scope.message = 'Test Message';
});
</script>
<div ng-app = "myAppTest">
<div ng-controller="MyControllerTest">
{{message}}
</div>
</div>
<!-- gives controller registration error -->
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowPricing" class="product-price-matrix">
<thead>
<th><span>Test Quantity</span></th>
<th><span>Test Quantity Pricing</span></th>
</thead>
<tbody>
<tr ng-repeat="price in product.PricingDetails_asArray[0].PricingDetail_asArray">
<td><span> {{price.QtyRange}} </span></td>
<td><span> {{price.FormattedPrice}} </span></td>
</tr>
</tbody>
</table>
</div>
<!-- add product pricing -->
<div class="product-details-page-description">
<span ng-bind-html-unsafe="product._LongDescription"></span>
</div>
<!-- Added for customer 9 for preview links -->
<div ng-show="product._ShowExternalBuyerPreviewLink" class="product-preview-link">
<span class="label" ng-localize="Customer9.ExternalBuyerPreviewMessage"></span>
</div>
<!-- Added for customer 9 for new product alerts -->
<div ng-show="product._ShowIsNew" class="product-details-page-description">
<span ng-localize="Customer9.IsNewBuyerAlert"></span>
</div>
<div class="product-details-page-uom" ng-show="(product._IsSoundToBegin)">
<span ng-show="EnablePricingByUnitOfMeasure && product._UnitsOfMeasure !=undefined && product._UnitsOfMeasure.length>0">{{getLocalizedString("Pricing.OrderUnit")}}:</span>
<span title="{{product._UnitsOfMeasure}}" ng-bind-html-unsafe="product._UnitsOfMeasure"></span>
</div>
<div class="product-details-page-price" ng-show="(EnableRRDCustomization && ShowPricingToBuyer && ShowUnitPrice)">
<span>{{product._UnitPrice}}</span>
</div>
<div class="product-details-page-turn-around" ng-show="product._ShowTurnaround">
<span>{{getLocalizedString('AdHocBottomProductDetail.ProductDetails.TurnAroundTime') + product._Turnaround}}</span>
</div>
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowMatrix" class="product-price-matrix">
<tbody>
<tr>
<td></td>
<td class="product-preview-link"><a ng-click='ResetFiltersAndProductMatrix()' href="javascript:"><span class="label" ng-localize="ManageApprovalSetings.ResetFilters"></span></a></td>
</tr>
<tr ng-repeat="Attribute in Currentproductmatrix">
<td><span> {{Attribute._DisplayName}}:</span></td>
<td><select ng-options="AttributeValue._DisplayName for AttributeValue in Attribute.AttributeValue_asArray | filter : FilterProductMatrix(Attribute.AttributeValue_asArray)" ng-change='DispLayProductMatrix(Attribute.AttributeValue,Attribute)' ng-model="Attribute.AttributeValue"></select></td>
</tr>
<tr ng-show="ShowMatrix && SubAttributes.ShowSubAttribute && ShowSubAttribute(product)">
<td><span>{{SubAttributes.SubAttributeName}}</span></td>
<td>
<input required="required" title="{{SubAttributes.SubAttributeName}}" type="text" ng-validate="{{SubAttributes.Validation}}" id="subAttributeNameValue" maxlength="200" ng-model="SubAttributes.SubAttributeValue">
<span class='validator-hint' id='hintValidatorsubAttributeNameValue' style="display: none;"></span>
</td>
</tr>
</tbody>
</table>
<div ng-show="ShowMatrix" class="product-details-page-description" style="margin-top: 10px;">
<span>{{getLocalizedString('Mobile.OrderLineItem.ProductName')}}:</span><span> {{product.DisplayName}} </span>
</div>
<table style="border:none !important">
<tr ng-show="data.ShowDeliverablesControl(product)">
<td style="border:none !important">
<label ng-localize="Deliverables" style="padding-right: 5px">##Deliverables</label>
</td>
<td style="border:none !important">
<label ng-show="(data.ConfirmationButtonAction==2 && isProductDetailsOpenFromKitToSelect)" style="padding-right: 5px"> : {{SelectedBuyerDelivarable.label}}</label>
<select ng-hide="(data.ConfirmationButtonAction==2 && isProductDetailsOpenFromKitToSelect)" ng-model="SelectedBuyerDelivarable" ng-change="deliverableChange()" ng-options="SelectedBuyerDelivarable.label for SelectedBuyerDelivarable in BuyerDelivarable"></select>
</td>
</tr>
<tr ng-show="ShowQuantityControl(product)">
<td>
<label for="" ng-localize="CatalogItemDetailsControl.Qty">##Qty</label>
</td>
<td>
<ng-quantity-control quantity="product.Quantity" selectedquantity="product.selectedquantity" isdownloadonly="IsDownloadOnly" registervalidationcallback="RegisterChildValidationControlCallbackFunction(CallbackFuncPointer,UniqueRef)"
registerclearquantitycallback="RegisterClearQuantityCallbackFunction(CallbackFuncPointer,UniqueRef)" uniquereference="data.currentProduct._CatalogItemID" onselectedvaluechange="OnProductSelectedQuantityChanged(UniqueIdentifier, Quantity)" includezeroquantity="false"
inventoryremaining="{{product._InventoryRemaining}}" displayerrorsonhover="false" allowbuyertoeditmultiplequantity="product._AllowBuyerToEditQuantity" group="product"></ng-quantity-control>
</td>
</tr>
</table>
<div ng-show="product.ShowReferenceCodes">
<span class="section-header" style="display: block;" ng-localize="Shared.CheckOutRefCode">reference</span></span>
<select ng-model="product.RefrenceCode" style="width: 95%;" id="{{product._CatalogItemID}}ProductDetails" ng-validate="{{product.Validations}}" ng-change="setrefernce(product)"
ng-options="RefrenceCode._Description group by RefrenceCode.group for RefrenceCode in product.ReferenceCodes"></select>
</div>
<div class="product-error-message" ng-hide="product._IsSoundToBegin">
<span title="{{product._CantBeginReason}}">{{getCantBeginReasonMessage(product)}}</span>
</div>
<div class="product-error-message" ng-show="data.isEditingByApprover && product._ApproverEditAllowed != 'true'">
<span>{{product._CantEditReason}}</span>
</div>
<div id="productErrorContainer" class="validation-container" style="display: none;width:100%;margin-top: 10px;margin-bottom: 10px">
<div class="validation-header">
<span class="icon-warning-sign"></span><span class="validaiton-info" ng-localize="inputerror"></span>
</div>
</div>
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowPricing" class="product-price-matrix">
<thead>
<th><span ng-localize="Shared.Quantity"></span></th>
<th><span ng-localize="Webpart.ProductDisplayQuantityPricing"></span></th>
</thead>
<tbody>
<tr ng-repeat="price in product.PricingDetails_asArray[0].PricingDetail_asArray">
<td><span> {{price.QtyRange}} </span></td>
<td><span> {{price.FormattedPrice}} </span></td>
</tr>
</tbody>
</table>
<div ng-show="product._TaxAuthorityUsed">
<small>{{product._TaxAuthorityUsed}}</small>
</div>
</div>
</div>
<div class="modal-footer">
<div class="product-details-page-actions" ng-show="ShowFooter">
<button ng-class="{true:'btn',false:'btn disabled'}[product._IsSoundToBegin=='true']" type='submit' ng-click="openProductDialog('/ProductCustomization',product,0)" ng-hide="IsInCartUpdateMode || IsReadOnlyPunchOutSession">
<span id="" class="ng-binding" ng-hide="product._ProductType=='10'">{{product._BuyNowButtonText}} </span>
<span id="" class="ng-binding" ng-show="product._ProductType=='10'">{{getLocalizedString('Saepio.Design')}} </span>
</button>
<button class="btn btn-secondary" type='submit' ng-click="returnToPrevious()" ng-hide="IsInCartUpdateMode || IsLevelTwoPunchOut" ng-localize="ShoppingCart.ContinueShopping">
##Continue Shopping
</button>
<button ng-class="{true:'btn',false:'btn disabled'}[(data.isEditingByApprover ? (product._ApproverEditAllowed == 'true') : 'true')]" type='submit' ng-click="openProductDialog('/ProductCustomization',product,0)" ng-localize="Shared.Update" ng-show="IsInCartUpdateMode && !IsLevelTwoPunchOut">
<span id="" class="ng-binding" ng-localize="Shared.Update"></span>
</button>
</div>
<div class="product-details-page-actions" ng-hide="ShowFooter">
<button class="btn btn-secondary" type='submit' ng-click="CloseDialog()" ng-localize="Shared.Close" ng-hide="IsLevelTwoPunchOut" >
<span id="" class="ng-binding" ng-localize="Shared.Cancel"></span>
</button>
</div>
</div>
</div>
Can someone help me on this matter? Here are my codes:
<div class="modal-body no-padding" style="overflow-y: scroll; max-height: 500px;">
<table width="auto" class="table report-table table-star" id="example">
<thead>
<tr>
<td class="center">#</td>
<th>Name</th>
<th>Email / Mobile</th>
<th>Date / Time</th>
<th>Excellent</th>
<th>Good</th>
<th>Average</th>
<th>Bad</th>
<th>Worse</th>
</tr>
</thead>
<tr ng-repeat="u in user_report">
<td class="center">{{$index+1}}</td>
<td>{{u.name}}</td>
<td>{{u.email}} / {{u.mobile}}</td>
<td>{{u.timestamp}}</td>
<td class="center">
<span ng-if="u.choice == 1"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 1"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 2"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 2"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 3"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 3"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 4"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 4"><i class="fas fa-times"></i></span>
</td>
<td class="center">
<span ng-if="u.choice == 5"><i class="fas fa-check"></i></span>
<span ng-if="u.choice != 5"><i class="fas fa-times"></i></span>
</td>
</tr>
</table>
</div>
And the script below the html to call the datatable:
<script>$(document).ready(function() {$('#example').DataTable();} );</script>
By the way, it show the data but there is "No data available in the table" message on the last row. Once I click on the sorting / pagination, the data gone out from the table.
Below is the sample Code availabe in the link I am trying to achieve my use case.
In this table, I will have one more column as first column which is an checkbox. On selecting the "Edit" button, only the selected checkbox rows from the table should show editable mode and other rows should display as static text. Is it possible to achieve it. Can anyone help me in this to meet my requirement.
<h4>Angular-xeditable Editable row (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:35%">Name</td>
<td style="width:20%">Status</td>
<td style="width:20%">Group</td>
<td style="width:25%">Edit</td>
</tr>
<tr ng-repeat="user in users">
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-name="name" e-form="rowform" e-ng-hide="true" onbeforesave="checkName($data, user.id)" e-required>
<span ng-hide="false">hello</span>
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
{{ showGroup(user) }}
</span>
</td>
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</table>
<button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>
I'd like to add a custom filter on my angularJS app. I want di strike text like this way if the object in the ng-repat has the isDeleted flag set as true. Code: here the HTML:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews | filter: deleteTitleText(news)">
<td>
<div ng-hide="editingData[news.id]">{{ news.title }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">{{ news.arg }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
The JS:
app.filter('deleteTitleText', function () {
return function (news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
return news;
}
});
This is a good way to implement this kind of filter? For now I receive this error: angular.js:13920 Error: [filter:notarray] Expected array but received: function (). Thanks
OPTION 1:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.title }}</span>
<span ng-show="news.isDeleted"><del>{{ news.title }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.title }}</span>
<span ng-if="news.isDeleted"><del>{{ news.title }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.arg }}</span>
<span ng-show="news.isDeleted"><del>{{ news.arg }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.arg }}</span>
<span ng-if="news.isDeleted"><del>{{ news.arg }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
OPTION 2:
<span ng-bind-html="news | deleteTitleText"></span>
app.filter('deleteTitleText', function ($sce) {
return function (input) {
if(input.isDeleted) {
output = $sce.trustAsHtml("<del>"+input.title+"</del>");
} else {
output = $sce.trustAsHtml("<span>"+input.title+"</span>");
}
return output;
};
});
remove filter from ng-repeat <tr ng-repeat="news in allNews">
So final would be similar to :
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-bind-html="news | deleteTitleText"></span>
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
....
....
Hope this helps
You need to alter you filter to expect the entire allNews array/object and work with that instead of just a single item in the list.
This might help.
For instance:
app.filter('deleteTitleText', function () {
return function (allNews) {
var filtered = [];
angular.forEach(allNews, function(news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
filtered.push(news);
});
return filtered;
}
});
Your ng-repeat should be changed from:
ng-repeat="news in allNews | filter: deleteTitleText(news)"
To:
ng-repeat="news in allNews | deleteTitleText"
Try to use ng-style, like in this plunker: https://plnkr.co/edit/0koMSQ54gUChdpB4Vrrm?p=preview
!item.isDisabled ? {'text-decoration': 'line-through'} : {'text-decoration': 'none'}
You can simply use ng-show and ng-hide
<tr ng-repeat="news in allNews">
<span ng-show="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-show="news.isDeleted"><del>{{news.arg}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.arg}}</del></span>
.
.
.
</tr>
How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!
try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"