how to set routing in angularjs controller and laravel routing to show html page under the angularjs component ---ng-view---.
can any one know how to display html file under ng-view in laravel-8
joblist.html file
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Job</h3>
</div>
<div class="card-body">
<a class="btn btn-success mb-2 float-right" href="/jobform" role="button"><i class="fas fa-plus"></i>
Add Job</a>
<table class="table table-bordered table-striped table-hover">
<thead class="text-center dark-primary">
<tr>
<th scope="col">Id</th>
<th scope="col">Job Title</th>
<th scope="col" style="width:50%">Description</th>
<th scope="col">Vacancies</th>
<th scope="col">UPDATE</th>
<th scope="col">DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in jobs">
<td>#{{ x.Job_id }}</td>
<td>#{{ x.Title }}</td>
<td>#{{ x.Description }}</td>
<td>#{{ x.No_of_vacancies }}</td>
<td class="text-center"><a ng-click="edit(x)" class="btn btn-outline-primary" role="button"><i
class="fas fa-edit text-center"></i></a></td>
<td class="text-center"><a ng-click="delete(x)" class="btn btn-outline-danger" role="button"><i
class="fas fa-trash text-center"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
web.php
Route::get('/jobangular',function(){
return view('jobpagedisplay');
});
jobpagedisplay.blade.php file
#extends('app')
#section('content')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>add</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini" ng-app="job" ng-controller="jobController">
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script>
var job = angular.module('job', ['ngRoute']);
job.controller("jobController", function($scope, $http) {
$scope.init = function() {
$http.get('/joblist').then(function(data) {
$scope.jobs = data.data[0];
});
}
$scope.init()
$scope.delete = function(x) {
if (!confirm('Are yuo sure?')) return;
$http.post('job/delete', x).then(function(response) {
$scope.init()
})
}
job.config(function($routeProvider) {
$routeProvider
.when("/jobangular", {
templateUrl: "joblist.html",
controller: "jobController"
});
});
});
</script>
</body>
</html>
#endsection
.html file is not showing in the ng-view div.
using laravel-8,
angular with cdn,
i write the script tag under the blade file.
how can i solve this
Here I want to show Name, Country values through $http, The data is showing in the table this is fine, but when I check any check box in that table I want to display Name, Country values of that selected checkbox. How can I do that?
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(indexVal, values) {
var getDataValue = {};
if (values) {
alert($scope.myData.records.Name[indexVal]);
}
}
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails($index, chkVal)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
i want to show Name and Contry for selected Checkbox only
</div>
</div>
Check this out, it works:
(Code explained below).
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$scope.getDataValue = [];
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(data) {
if ($.inArray(data, $scope.getDataValue) === -1) {
$scope.getDataValue.push(data);
} else {
var index = $scope.getDataValue.indexOf(data)
$scope.getDataValue.splice(index, 1);
}
console.log($scope.getDataValue);
}
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails(x)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
<b>Selected Name and Country</b>
<div ng-repeat="x in getDataValue">
{{x.Name}} - {{x.Country}}
</div>
</div>
Explanation
Function showDetails(x) gets triggered on check/uncheck of the check box.
Parameter x is an object in the array you pressed at that instance.
Then, it checks whether the object (i.e, data) is present in the array (i.e, $scope.getDataValue) or not. if ($.inArray(data, $scope.getDataValue) === -1)
If it is absent, it just pushes the object in the array and shows the array.
Else, it deletes the object which is unchecked and shows the remaining array.
Since I am new to AngularJS I have come across an issue when it comes to presenting my database data which has been mapped using Rest and manipulated using JPA. So it is as ready as it can be. No need for further manipulation. Now using the $http.get I have been able to present the first table just calling the url but when it comes to getting data presented from a different table by sending a parameter something doens't work out.
In the module.js it looks like this
(function () {
'use strict';
angular.module('app',[]);
})();
The controller.js like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['$http'];
function MyController($http) {
var vm = this;
vm.players = [];
vm.historia = [];
vm.getAll = getAll;
vm.getHistory = getHistory;
init();
function init(){
getAll();
getHistory(name);
}
function getAll(){
var url = "/all/players";
var playersPromise = $http.get(url);
playersPromise.then(function(response){
vm.players = response.data;
});
}
function getHistory(name){
var url = "/all/allplayergames/" + name;
var historiaPromise = $http.get(url);
console.log([url]);
historiaPromise.then(function(response){
vm.historia = response.data;
console.log([response.data]);
});
}
}
})();
and last but not least html
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link th:if="${mode=='development'}" rel="stylesheet" href="../static/bootstrap.css" th:href="#{/bootstrap.css}"/>
<link th:if="${mode=='production'}" rel="stylesheet" href="../static/bootstrap.min.css" th:href="#{/bootstrap.min.css}"/>
<script type="text/javascript" src="/static/angular.min.js" th:src="#{/angular.min.js}" ></script>
<script type="text/javascript" src="/static/app/app.module.js" th:src="#{/app/app.module.js}" ></script>
<script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="#{/app/yatzy.controller.js}" ></script>
</head>
<body ng-app="app" >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Game Results</a>
</div>
</div>
</nav>
</header>
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div ng-controller="MyController as vm">
<div class="btn-group" role="group">
<button ng-click="vm.getAll()" type="button" class="btn btn-default">Player Game History</button>
</div>
<table class="table">
<thead>
<tr>
<th>PlayerID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in vm.players">
<td> {{player.playerid}}</td>
<td> {{player.name}}</td>
<td>
<button class="btn btn-danger" ng-click="vm.getHistory(player.name);
">View History</button>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.historia">
<td> {{p.score}}</td>
<td> {{p.player.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >
<div class="container">
<p th:text="${#dates.format(datetime,'dd MMM yyyy HH:mm')}" class="text-muted">Todays date: </p>
</div>
</footer>
</body>
</html>
And the console log does show the right player url when the "View History" is clicked, but it doesnt get the data from the table that is the score or the name.
Hi all I'm new to angular. My post is identical to: Inline `ng-template` not found by `ng-include`.
I have an ng-include which isn't finding my ng-template, keep getting a 404: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/display.
When I put the template in a separate html file it works fine but obviously this is not ideal.
Any ideas would be greatly appreciated.
My view:
<div class="panel panel-primary"
ng-controller="TimesheetListCtrl as vm">
<div class="panel-heading"
style="font-size:large">
Timesheet for week ending
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<td>Program</td>
<td>Category</td>
<td>Activity</td>
<td>Reference</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<td>Total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="timesheet in vm.timesheets" ng-include="'display'"><!--ng-include="vm.getTemplate(timesheet)"-->
<script type="text/ng-template" id="display">
<td>{{ timesheet.program }}</td>
<td>{{ timesheet.category }}</td>
<td>{{ timesheet.activity }}</td>
<td>{{ timesheet.reference }}</td>
<td>{{ timesheet.hrsWrkMonday }}</td>
<td>{{ timesheet.hrsWrkTuesday }}</td>
<td>{{ timesheet.hrsWrkWednesday }}</td>
<td>{{ timesheet.hrsWrkThursday }}</td>
<td>{{ timesheet.hrsWrkFriday }}</td>
<td>{{ timesheet.hrsWrkSaturday }}</td>
<td>{{ timesheet.hrsWrkSunday }}</td>
<td><b>{{ timesheet.hrsWrkMonday + timesheet.hrsWrkTuesday + timesheet.hrsWrkWednesday + timesheet.hrsWrkThursday + timesheet.hrsWrkFriday + timesheet.hrsWrkSaturday + timesheet.hrsWrkSunday }}</b></td>
<td><a class="btn btn-primary">Edit</a>
<a class="btn btn-primary">Delete</a></td>
</script>
<script type="text/ng-template" id="edit">
<td>Program EDIT</td>
<td>Category EDIT</td>
<td>Activity EDIT</td>
<td>Reference EDIT</td>
<td>Monday EDIT</td>
<td>Tuesday EDIT</td>
<td>Wednesday EDIT</td>
<td>Thursday EDIT</td>
<td>Friday EDIT</td>
<td>Saturday EDIT</td>
<td>Sunday EDIT</td>
<td>Total EDIT</td>
<td><a class="btn btn-primary">Save</a>
<a class="btn btn-primary">Cancel</a>
</td>
</script>
</tr>
</tbody>
</table>
</div>
My index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DnB Timesheet Management</title>
<!-- Style sheets -->
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="timesheetManagement">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">DnB Timesheet Management</div>
</div>
</div>
</nav>
<div class="container">
<div ui-view></div>
<!--<div ng-include="'app/timesheets/timesheetListView.html'"></div>-->
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Services -->
<script src="common/common.services.js"></script>
<script src="common/timesheetResource.js"></script>
<!-- Product Controllers -->
<script src="app/timesheets/timesheetListCtrl.js"></script>
<script src="app/timesheets/timesheetEditCtrl.js"></script>
</body>
</html>
I am using angular.js for font-end and node.js for server side.
Now, I am having some list of values in array randomly.
Html code :
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>
Controller code :
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
Output:
Expected Result :
In the above output i want to print the marked result in sequence order as per the array in controller.
Then first five field code
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
should not be change and remaining <td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
should use in ng-repeat.
ng-repeat orders objects alphabetically by default.
If you want to avoid that you can use:
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
And in your HTML:
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
Working snippet:
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>