I have a partial template that contains a <script src='....'/> tag in it.
When user clicks a button I need to render partial template in modal.
so here is my code:
List.html
<script src="App/controllers/detailsCtrl.js" type="text/javascript"></script>
<div class="clearfix"></div>
<h3 class="page-header">All Websites</h3>
<br />
<div ng-app="app" class="" ng-controller="listCtrl" data-ng-init="init();">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
Name
</th>
<th>
Display Name
</th>
<th>
Created On
</th>
<th>
Source Site
</th>
<th>
State
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="website in model | orderBy:predicate:reverse | filter:paginate">
<td>{{website.Name}}</td>
<td>{{website.DisplayName}}</td>
<td>{{website.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
<td>{{website.FK_Name | sourceSiteFilter}}</td>
<td>
<i class="fa fa-toggle-on active"
ng-if="website.State == 'Started'"
ng-click="changeState(website)">
</i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"
ng-if="website.State == 'Stopped'"
ng-click="changeState(website)">
</i>
<td style="text-align:center">
<i class="fa fa-pencil fa-lg"></i>
<i class="fa fa-book fa-lg"></i>
</td>
</tr>
<tr ng-if="model.length == 0">
<td colspan="6" class="text-center"></td>
</tr>
</tbody>
</table>
<center>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</center>
</div>
</div>
listCtrl.js
//open modal and shows details of single object
$scope.showDetails = function (websiteName) {
var modalInstance = $modal.open({
templateUrl: 'app/views/details.html',
controller: 'detailsCtrl',
resolve: {
obj: function () {
return websiteFactory.getFilteredObject($scope.model, websiteName);
}
}
});
}
details.html
<div ng-controller="detailsCtrl">
<div class="modal-header">
<h3>Website Details</h3>
</div>
<div class="modal-body">
<table class="table table-bordered" id="details">
<thead></thead>
<tbody>
<tr>
<td>Name</td>
<td>{{singleObject.Name}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{singleObject.DisplayName}}</td>
</tr>
<tr>
<td>Description</td>
<td>{{singleObject.Description}}</td>
</tr>
<tr>
<td>Created On</td>
<td>{{singleObject.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
</tr>
<tr>
<td>Source Website</td>
<td>{{singleObject.FK_Name}}</td>
</tr>
<tr>
<td>Current State</td>
<td>{{singleObject.State}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<!--#*<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>*#-->
</div>
</div>
detailsCtrl.js
app.controller('detailsCtrl', ['$scope', '$modalInstance', 'obj', function ($scope, $modalInstance, obj) {
$scope.singleObject = {
Name: obj.Name,
DisplayName: obj.DisplayName,
DateTime: obj.DateTime,
FK_Name: obj.FK_Name,
State: obj.State,
Description: obj.Description
};
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
}]);
Error
Argument 'detailsCtrl' is not a function, got undefined.
If I include this script tag to index.html(my main view page). Everything works.
Problem is that I am adding the script tag but I know script is not rendering. why is this so? How can I lazyload the script file. Or should I always add all the js files to the main view (index.html)?
Related
Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>
Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.
I wanted to sort the column data in ascending order on click of a button.But due to nested ng-repeat directives and nested objects in my json I'm not able to do it.My Json data is very large.I'm kinda stuck from quite a few days now.Any help will be appreciated.
JSON data link is-json link
My HTML looks like this-
<div class="container" >
<div class="row searchbar">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Sort by<span class="caret"></span>
</button>
<ul ng-model="sortColumn" class="dropdown-menu" role="menu">
<li><a >Team 1</a></li>
<li><a >Team 2</a></li>
<li><a >Score 1</a></li>
<li><a >Score 2</a></li>
</ul>
</div>
<input type="text" class="form-control" name="x" ng-model=filterField placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
<table class="table table-striped" id="myTable">
<thead >
<tr class="info ">
<th class="text-center">Match</th>
<th class="text-center">Team 1</th>
<th class="text-center">Score 1</th>
<th class="text-center">Team 2</th>
<th class="text-center">Score 2</th>
</tr>
</thead>
<div ng-controller="matchesController as matchCtrl">
<tbody ng-repeat="match in matchCtrl.matchesData ">
<tr ng-repeat="mydata in match.matches | filter:filterField | orderBy:matchCtrl.orderProperty">
<td class="text-center" >{{match.name |filter:matchname}}<br>
<span id="date">{{mydata.date | date:fullDate }}</span></td>
<td class="text-center" >{{mydata.team1.name | uppercase}}<br>
<span id="code">[{{mydata.team1.code}}]</span>
</td>
<td class="text-center">{{mydata.score1}}<span ng-show="mydata.score1 === null">Not Available</span></td>
<td class="text-center" >{{mydata.team2.name | uppercase}}<br>
<span id="code">[{{mydata.team2.code}}]</span>
</td>
<td class="text-center">{{mydata.score2}}<span ng-show="mydata.score2 === null">Not Available</span></td>
</tr>
</tbody>
</table>
</div>
</div>
My controller looks like this-
myApp.controller('matchesController',['$http',function($http) {
//create a context
var match = this;
this.matchesData=[];
this.loadAllMatches = function(){
$http({
method: 'GET',
url:'https://raw.githubusercontent.com/openfootball/football.json
/master/2016-17/en.1.json',
}).then(function successCallback(response) {
match.matchesData=response.data.rounds;
console.log(match.matchesData);
}, function errorCallback(response) {
alert("some error occurred. Check the console.");
console.log(response);
});
};// end load all blogs
this.loadAllMatches();
}]); // end controller
It would help if you create plunkers for these questions. Basically, just implement a method to change the value of a property using ng-model, and set the orderBy col to ng-model.
I've added '.' notation to ng-model to help with scoping issues as ng-repeat creates it's own scope.
Try this:
<select name="singleSelect" ng-model="sorting.orderCol">
<option value="name">Name</option>
<option value="age">Age</option>
<option value="phone">Phone</option>
</select>
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:sorting.orderCol">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
Plunker: https://plnkr.co/edit/Rh6TbmbIUkAjwMeevdP1?p=preview
I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance
I am using a expendable table for that the code is below
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Here I am using ng-repeat-start directive for expandable table.
but pagination showing this alert:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
and an error:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
Help me I need pagination in expandable table.
You have 2 errors, i think.
dirPaginate require use dir-paginate instead of ng-repeat.
You need use pagination control directive.
To solve you problem do next:
Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
Add in html <dir-pagination-controls></dir-pagination-controls>
Modified html
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>