HI Team
I am trying to create modal popup using bootstrap and angular, im a getting an error "
Uncaught SyntaxError: Invalid or unexpected token
js:4
What I have tried:
import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
// index.cshtml
@{
ViewBag.Title = "Home Page";
}
<h2>TimeLine</h2>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="module" src="~/Scripts/angular-ui/CheckLine.js"></script>
<script type="text/javascript">
var app = angular.module('CheckTimeLine', [])
app.controller('Home', function ($scope, $http) {
GetDashboardTimeLine();
function GetDashboardTimeLine() {
$scope.checkList = [];
$http({
method: 'Get',
url: '/Home/GetAll'
}).success(function (data, status, headers, config) {
for (var i = 0; i < data.length; i++) {
var fromDateTime = data[i].FromDateTime;
var toDate = data[i].ToDate;
console.log();
data[i].FromDateTime = new Date(ConvertJsonDateToDateTime(fromDateTime));
data[i].ToDate = new Date(ConvertJsonDateToDateTime(toDate));
}
$scope.checkList = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
console.log();
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var tzoffset = (new Date(parsedDate)).getTimezoneOffset() * 60000;
var localISOTime = (new Date(parsedDate - tzoffset)).toISOString().substring(0, 19).replace('T', ' ').replace(/-/g, '/');
console.log();
return localISOTime;
}
$scope.TimeDiff = function (start, end) {
var diff = (end.getTime() - start.getTime()) / 1000;
diff /= 60 * 60;
console.log();
return Math.abs(Math.round(diff));
}
});
</script>
<div ng-app="CheckTimeLine" ng-controller="Home" align="center">
<table class="table table-bordered table-hover table-striped">
<tr>
<th>Incident</th>
<th>dateTime</th>
<th>Begin</th>
<th>End</th>
<th>Duration</th>
</tr>
<tbody ng-repeat="e in checkList">
<tr>
<td>{{e.Incident}}</td>
<td>{{e.FromDateTime | date : "yyyy/MM/dd"}}</td>
<td>{{e.FromDateTime | date : "HH:mm:ss"}}</td>
<td>{{e.ToDate | date : "HH:mm:ss"}}</td>
<td>{{TimeDiff(e.FromDateTime,e.ToDate)}} Hours</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Process Flow</button>
</body>
Submit an article or tip