I am building a pagination table and i am using routeprovider. So the flow is on the homepage user is presented with a carousel when he clicks the text on carousel he is directed to a new html page called queryBoard, where there is a form to submit some details, it then fetches the data from back and displays in tabular format but when user is redirected to queryBoard page i keep getting error
Unknown provider: ngTableParamsProvider
I have included 'ngTable' in my module.
Main.js
angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
index.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"></script>
<script src="resources/js/CarouselController.js"></script>
<script src="resources/js/dashboardrouter.js"></script>
<script src="resources/js/TypeAheadController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>
welcome.html [user is presented with carousel and on click he is routed to a new page]
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
<div class="carousel-caption">
<a ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
There are exceptions during app initialization, click here to see details
</div>
Carousel.js [relevant part]
$scope.sendEnvName = function (gridName) {
alert(gridName)
$location.path("/queryBoard/"+gridName);
}
dashboardrouter.js
angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'welcome.html',
controller: 'CarouselDemoCtrl'
}).
when('/queryBoard/:gridName', {
templateUrl: 'query/queryboard.html',
controller: 'documentNameTypeAheadController',
}).
otherwise({
redirectTo: '/welcome'
});
}]);
TypeAheadCOntroller.js
angular.module('ui.bootstrap.demo').controller('documentNameTypeAheadController', function ($scope, $http, $filter, ngTableParams,
$uibModal, $timeout, $log, $window,
$routeParams) {
alert($routeParams.gridName);
});
QueryBoard.html
<title>Query Board</title>
<script type="text/css">
.app-modal-window .modal-dialog {
width: 500px;
}
</script>
<body>
<script type="text/html">
<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index"/>
</ul>
</script>
<div class='container-fluid typeahead-demo' ng-controller="documentNameTypeAheadController">
<h1>Query Board</h1>
<form class="form-inline" role="form" ng-submit="submit()">
<div class="form-group">
<input type="text" placeholder="type-name" ng-model="selectedDocumentTypeName"
uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
</div>
<div class="form-group col-md-offset-1">
<input type="text" placeholder="search criteria" class="form-control" ng-model="queryCriteria">
</div>
<button type="submit" class="btn btn-default col-md-offset-1">Submit</button>
<div>
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="headerName in headerNames"
class="text-center sortable">
{{headerName}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in paginatedDetailedDataType">
<td ng-repeat="headerName in headerNames">
<div class="animate-switch" ng-if="headerName == spaceIdFieldName">
{{user[headerName]}} </div>
<div class="animate-switch" ng-if="headerName != spaceIdFieldName">{{user[headerName]}}</div>
</td>
<script type="text/ng-template" id="DetailedQueryView.html">
<div class="modal-header">
<h3>Detailed Query view for {{detailedTypeName}} spaceId {{detailedSpaceId}}</h3>
</div>
<div class="modal-body">
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="property in detailedObjectProperties">
<td>{{ property.key }}</td>
<td>
<div ng-show="property.disabled">{{property.value}}</div>
<div ng-hide="property.disabled"><input type="text" ng-model="property.value"/>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-hide="updateEnabled" ng-click="edit()">Edit</button>
<button class="btn btn-primary" ng-show="updateEnabled" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
I tried including the ngTable in TypeAheadController also but doesnot works, Can you please guide me where am i going wrong
Related
can you help me how to print it into pdf on the table with input value.
sorry im just a student and my supervisor need this project for my output
and i cant add my materialize js and css because for body limit
and i add a add button for new Row for the table with a input that can print it to the pdf. just help me in converting to pdf and i can handle the rest of formating in pdf
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bureau of Internal Revenue</title>
</head>
<body class="scrollspy bg">
<nav>
<div class="nav-wrapper white" >
<div class="container">
<img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
<a href="" style="margin-left:1%;" class="brand-logo black-text"> Bureau of Internal Revenue
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Create</li>
</ul>
</a></div>
</div>
</nav>
<div class="showcase container">
<div class="bg-showcase">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<br>
<br>
<br>
<br>
<h1 class="white-text center"><b>Welcome</b></h1>
<h1 class="center white-text"><b>to</b></h1>
<h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
</div>
</div>
</div>
</div>
<form action="">
<div class="row">
<div class="col s12 l10 offset-l1">
<div class="card">
<div class="card-content">
<div class="">
<h3><b>Index of Success Indicators</b></h3>
<table class="striped">
<thead>
<tr>
<th>Major Final Outputs</th>
<th>Performance Measures</th>
<th>Performance Targets</th>
<th>Success Indicator
<p>(Measure + Target)</p></th>
<th>Organization Outcome Sectoral Goals</th>
</tr>
</thead>
<thead>
<tr>
<th>A. Strategic Priority</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>B. Core Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>C. Support Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
</table>
<div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s12 l6">
<h4>Links</h4>
<ul>
<li>Home</li>
<li>Back to Top</li>
<li>About Developer</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey darken-2">
<div class="container">Bureau of Internal Revenue © 2019</div>
</div>
</footer>
</body>
<div id="create" class="modal">
<ul class="container center" style="margin-bottom: 3%;">
<h2>Create</h2>
<li>Index of Success Indicators</li>
<br><br>
<li>Performance Monitoring and Coaching</li>
<br><br> <li>CSC Individual Development Plan</li>
<br><br> <li>Individual Performance Commitment And Review</li>
</ul>
<div class="modal-footer">
close
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// Init Sidenav
$('.button-collapse').sideNav();
// Scrollspy
$('.scrollspy').scrollSpy();
$('.modal').modal({
dismissible:true,
inDuration:300,
outDuration:200,
ready:function(modal,trigger){
console.log('Modal Open',modal,trigger);
}
});
jQuery(function(){
var counter = 1;
jQuery('a.addline').click(function(event){
event.preventDefault();
var newRow =jQuery('<tr class="number">'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter + '<th><input type="text" name="" class="center" id=""/></th>' +
counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
counter ++;
jQuery('tbody.line').append(newRow);
});
});
function demoFromHTML(){
var pdf= new jsPDF('p','pt','letter');
source = $('#isi')[0];
specialElementHandlers={
'#bypassme':function(element,renderer){
return true
}
};
margins = {
top:80,
bottom:60,
left:40,
width:552
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width':margins.width,
'elementHanlders':specialElementHandlers
},
function(dispose){
pdf.save('testing.pdf');
}
,margins);
};
});
</script>
</body>
</html>
I have Home Team and away Team Scorer in my HTML and i want to sort each Goal Scorer in Minutes (Ascending). Here is the HTML Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="angular/angular.min.js"></script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreController', ['$scope', function($scope) {
$scope.goals =
[{scorer:'Glen', mins:'40"', type:'Own Goal', min:40},
{scorer:'Beckham', mins:'20"', type:'Goal', min:20},
{scorer:'Ronaldo', mins:'70"', type:'Own Goal', min:70}];
}]);
})(window.angular);
</script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreControllerX', ['$scope', function($scope) {
$scope.goalsx =
[{scorer:'Glen', mins:'4"', type:'Goal', min:4},
{scorer:'Glen', mins:'75"', type:'Goal', min:75},
{scorer:'David', mins:'30"', type:'Own Goal', min:30}];
}]);
})(window.angular);
</script>
</head>
<body ng-app="orderByScore">
<div ng-controller="ScoreController">
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goalx in goalsx | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
If away team is working, home team is not displaying. if home team display the away team is dissappear. I want the home and away team scorer display. Please Help to make it work.
You will have to use ng-repeat with filters. In your case, you will have to use orderby filter.
<ul>
<li ng-repeat="goal in goalsx | orderBy:'goal.mins'">{{goal.scorer}}</li>
</ul>
Hope this helps.
replace goal with goalx in ng-repeat="goalx in goalsx | orderBy:'+min' like {{goalx.scorer}}
In home team's case you used "ng-repeat = goalx in goalsx" but inside the div everywhere you used "goal.scorer","goal.miins", etc. All you have to do is replace the ng-repeat as "ng-repeat = goal in goalsx".
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goalsx | orderBy:'+min'"> // use 'goal in goalsx' here
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
I have one table which will fill with the JSON data. After the filling table, If some one wants to modify any row then it will pop-up window, where you can modify.
What I am doing:
I made two controller, I want to pass the ng-model value from one controller to other controller which is controller for window.
Please tell me how to connect these two controller.
Please see the running example,
http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="task.title" />
<input type="text" ng-model="task.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
});
app.controller('TaskController', function($scope, $rootScope){
$scope.editTask=function(task){
$rootScope.task=task;
}
});
</script>
</body>
</html>
First, place your ng-app="myApp" and ng-controller="tasksCtrl" to the body element.
E.g.
<body ng-app="myApp" ng-controller="tasksCtrl">
Then, move the
$scope.editTask=function(task) {
$scope.task = task;
};
To the tasksCtrl. The TaskController is no longer needed. You can remove it.
Since, it only use one controller you can use $scope instead of $rootScope.
Here's the Plunkr.
Hope it helps.
What you are trying to do would create a tight coupling between controllers but from what I see in the plunkr you would be better off with using angular-ui modal and just instantiate the modal window from code.
There are few mistakes that you did
First one that you modal html code is not inside ng-app
and you can use is Parent Child Concept of Angular ,In which you have no need to use $rootScope
Pluncker having complete solution of your problem:http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview
Html:
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="Edittask.title" />
<input type="text" ng-model="Edittask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Controller:
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task){
$scope.selectedTask=task;
}
});
app.controller('TaskController', function($scope, $rootScope){
$scope.Edittask={};
$scope.Edittask.title="";
$scope.Edittask.description="";
$scope.saveTask=function(){
console.log('called');
$scope.selectedTask.title=$scope.Edittask.title;
$scope.selectedTask.description=$scope.Edittask.description;
}
});
If you need to access any methods in other controller and pass the data you could do like this,
angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);
Firstly I am very beginner at angular.js.
I have 3 jsp file. main.jsp, list.jsp and new.jsp.
I can view them from different urls but I want to combine them tabs in main.jsp. So I tried below but I couldn't success. I want to show them new.jsp and list.jsp files under tabs.
My main.jsp
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<!-- content ends -->
</div><!--/#content.span10-->
<script>
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: '/admin.brands/list',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: '/admin.brands/new',
cssClass: 'icon-plus'
}];
$scope.currentTab = '/admin.brands/list';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
list.jsp. Note that list.jsp has own controller.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-app="MyApp" ng-controller="PostsCtrl">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="post in posts | filter:search">
<td>{{post.brandid}}</td>
<td>{{post.name}}</td>
<td>{{post.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" ><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{post.brandid}}" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
new.jsp
<div class="row-fluid sortable">
<div class="box span12">
<%-- <div class="box-header" data-original-title>
<h2>
<i class="glyphicon glyphicon-info-sign"></i>
<tags:label text="new.brand"/></h2>
</div> --%>
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal">
<fields:form formName="brand.form" >
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<fields:field name="name" cssClass="validate[required]"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<fields:field name="isactive" value="1"/>
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-lightblue btn-modal-trigger"><tags:label text="save"/></button>
</div>
</fields:form>
</form>
</div>
</div>
I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.