What is the best way to configure a search field on a table that was loaded from MongoDB using a Controller (MEAN architecture: MongoDB | Express | Angular | NodeJS)
I have a main page:
<section class="content">
<div class="nav-tabs-custom" ng-controller="SoftwareInventoryCtrl as swInventoryCtrl">
<ul class="nav nav-tabs">
<li>
<a href data-target="#tabSummary" data-toggle="tab">
<i class="fa fa-bar-chart"></i> Software Summary
</a>
</li>
<li>
<a href data-target="#tabList" data-toggle="tab">
<i class="fa fa-bars"></i> Software List
</a>
</li>
<li>
<a href data-target="#tabOSList" data-toggle="tab">
<i class="fa fa-windows"></i> Operating Systems
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabSummary" ng-include="'myapp/softwareInventorySummary.html'"></div>
<div class="tab-pane" id="tabList" ng-include="'myapp/softwareInventoryList.html'"></div>
<div class="tab-pane" id="tabOSList" ng-include="'myapp/softwareInventoryOSList.html'"></div>
</div>
</div>
Informations come from a Controller:
(function() {
angular.module('primeiraApp').controller('SoftwareInventoryCtrl', [
'$http',
'consts',
SoftwareInventoryController
])
function SoftwareInventoryController($http, consts) {
const vm = this
const urlSoftwareList = `${consts.apiUrl}/softwareInventory`
vm.refresh = function() {
$http.get(urlSoftwareList).then(function(response) {
vm.softwareInventory = { machine_name: [{}],
display_name: [{}],
company: [{}],
version: [{}] }
vm.softwareInventorys = response.data
})
}
vm.refresh()
} })()
and the following page is loaded with all data:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/deps.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<table id="tableSoftwareInventory" class="table table-bordered table-striped dataTable" role="grid">
<thead>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-repeat="softwareInventory in swInventoryCtrl.softwareInventorys">
<td class="sorting_1">{{ softwareInventory.machine_name }}</td>
<td>{{ softwareInventory.display_name }}</td>
<td>{{ softwareInventory.company }}</td>
<td>{{ softwareInventory.version }}</td>
</tr>
</tbody>
<tfoot>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tfoot>
</table>
</div>
</div>
</div>
<script src="/assets/js/deps.min.js"></script>
<script src="/plugins/datatables.net/js/jquery.dataTables.js"></script>
<script src="/plugins/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
</body>
</html>
My ideia is put a input box to search on tableSoftwareInventory table
Any ideias?
P.S. I using AdminLTE template.
Thank you very much!!
Finally I found the method necessary: Just implemented dir-paginate function on page where the table is loaded using parameter "search" (bult in the function). More details about how to implement, access here
Related
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
I am new to Angular.
I am getting the error " [ng:areq] Argument 'myTableController' is not a function, got undefined"
I tried to debug it with alerts and I am not hitting Test4 at all
Why is that?
/// <reference path="angular.js" />
alert("Test1");
var app1 = angular.module("myTableModule", []);
alert("Test2");
app1.controller("myTableController", function($scope) {
alert("Test4");
});
alert("Test3");
The following is my html source code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/currentSettings.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div ng-app="myTableModule" ng-controller="myTableController">
<table>
<thead>
<tr>
<th>Company Name</th>
<th>Customer Name</th>
<th>Document Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="currentSetting in currentSettings">
<td>{{currentSetting.companyName}}</td>
<td>{{currentSetting.customerName}}</td>
<td>{{currentSetting.docType}}</td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2016 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"4373e3d6a6314b6bb4066b12f1b12d1f"}
</script>
<script type="text/javascript" src="http://localhost:55964/60de32f396fe4106a9655183ab19f24b/browserLink" async="async"></script>
<!-- End Browser Link -->
You need to refer the .js file of your controller in the html file.
Let say if your controller is in a file called controller.js
then in your html you have to write like below
<script src="controller.js" type="text/javascript"/>
To solve the problem I had to recreate the project. Also my path to the web service was not correct.
Thank you for all the help and support
I have two controller file of anglularjs and two different service file for each.how i can call two different controller on same html page so i can display my user and data of user on same page.and service file is taking data from java file.two controller file:
1.usernamectrl.js service:frontendservice.js angularjs:java user.java
2.userexamctrl.js service:userfrontendservice.js angularjs userexam.java
3.html page:myexam.html
I want two display username and userdata on myexam page.
console image when i run code
<!-- language: userexamapp-js -->
angular.module('userexamApp',[ 'editableTableWidgets', 'userfrontendservices',
'spring-security-csrf-token-interceptor' ])
.filter('excludeDeleted', function() {
return function(input) {
return _.filter(input, function(item) {
return item.deleted == undefined || !item.deleted;
});
}
})
.controller('userexamCtrl',['$scope','userexamservice','$timeout',
function($scope, userexamservice, $timeout) {
loaduserexamData();
function loaduserexamData() {
userexamservice.searchUserExambyId().then(
function(userExams) {
$scope.userexams = userExams.userExams;
console.log($scope.userexams);
})};
} ]);
<--service:userexamservice.js>
angular.module('userfrontendservices', [])
.service('userexamservice',
[ '$http', '$q', function($http, $q) {
return {
searchUserExambyId : function() {
var deferred = $q.defer();
$http.get('/userexam/')
.then(function(response) {
if (response.status == 200) {
deferred.resolve(response.data);
} else {
deferred.reject('Error retrieving exam');
}
});
return deferred.promise;
},
};
} ]);
<!-- language: myexam-html -->
<b>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- BOOTSTRAP STYLES-->
<script src="/resources/js/ui/angular-route.min.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css">
<script src="/resources/js/ui/angular.js"></script>
<script src="/resources/js/ui/angular.min.js"></script>
<script type="text/javascript" src="/resources/js/ui/jquery-2.1.3.js"></script>
<script src="/resources/js/ui/jquery-1.11.3.min.js"></script>
</head>
<div id="myexam"></div>
<body>
<header class="page-header pure-g not-ready"
ng-class="{'app-ready': vm.appReady}">
<div id="caloriesCounterApp" ng-controller="CaloriesTrackerCtrl">
<div class="pure-u-lg-1-2 pure-u-1">
<a class="pure-menu-heading" href="#"> <img class="logo"
src="/resources/img/logo.png">
</a> <span class="header-element page-title"><h2></h2></span>
</div>
<div class="pure-u-lg-1-2 pure-u-1 utilities ">
<div class="header-element username">
<div class="username-placeholder" ng-hide="vm.userName"></div>
<span ng-cloak> welcome{{vm.userName}}</span>
</div>
<div class="header-element">
<a class="logout" href="#" ng-click="logout()">Logout</a>
</div>
</div>
</div>
</header>
<main class="container not-ready" ng-class="{'app-ready': vm.appReady}">
<div class="row" style="margin: 5px;">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">Userexams</div>
<div class="panel-body"></div>
<div id="userexamApp" ng-controller="userexamCtrl">
<table cellpadding="0" cellspacing="0" border="0"
class="table table-striped table-bordered" id="exampleone">
<thead>
<tr>
<th>examname</th>
<th>examtype</th>
<th>outof</th>
<th>Markobtain</th>
<th>date</th>
<th>time</th>
<th>Result</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in userexams">
<td>{{ x.examName }}</td>
<td>{{ x.examType }}</td>
<td>{{ x.outof }}</td>
<td>{{ x.marksObtain }}</td>
<td>{{ x.date }}</td>
<td>{{ x.time }}</td>
<td>{{ x.result }}</td>
<td>{{ x.percentage }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript" data-main="/resources/js/userexam"
src="/resources/bower_components/requirejs/require.js"></script>
<script type="text/javascript" data-main="/resources/js/run-calories-tracker"
src="/resources/bower_components/requirejs/require.js"></script>
</body>
</html>
</b>
It is pretty straightforward, in order to use multiple controllers, just use multiple ngController directives, provided you have the controllers available in your application module:
<div class="one" ng-controller="firstController">
<!-- -->
</div>
<div class="two" ng-controller="secondController">
<!-- -->
</div>
I have made a page with 3 links. I want that as I click one of the links, the associated behaviour should showup.
Following is my code :
index.html
<html>
<head>
<title> SiteMan</title>
<link rel= "stylesheet" href="stylesheet.css">
<!--<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">-->
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">-->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "tree.js"></script>
</head>
<body ng-app="myApp">
<div>
<div id = "header">
<h1>Siteman RANN 0.1</h1>
</div>
<div id ="nav">
<button> Add Attribute </button>
<button> Add User </button>
<button> Add Doccument </button>
</div>
<div id = "aside" style="padding:5px">
All Attributes</br>
All Users</br>
All Document Types</br>
</div>
<div id = "section">
<table ng-controller="mainCtrl" ng-show="attr">
<tr ng-repeat="x in attributes">
<td>{{x.name}}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="user">
<tr ng-repeat="x in names">
<td>{{ x.displayName }}</td>
</tr>
</table>
<table ng-controller="mainCtrl" ng-show="docs">
<tr ng-repeat="x in extnsion">
<td>{{ x.extension }}</td>
</tr>
</table>
</div>
<div id = "article">
</div>
<div id = "footer">
Copyright © Siteman RANN
</div>
</div>
</body>
</html>
I want that if I click on "All Attributes" link, attr=1 and user and docs should be assigned value 0 . This should happen for all three links : All Attributes, All Users, All Document types .
All Attributes</br>
All Users</br>
All Document Types</br>
I am using xcode and phonegap for mobile development.When i run the application with simulator,it does not apply any stylesheet. Please let me know how to get rid of this issue.
Here is the index.html Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="stylesheet" type="text/css" href="jqtouch.css" />
<link href="theme.css" rel="stylesheet" type="text/css" />
<script src="Jquery.1.6.1.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch({});
</script>
</head>
<body >
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>
NIAID</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Search Users</li>
</ul>
</div>
<div id="get">
<div class="toolbar">
<h1>
NED - Search Users</h1>
</div>
<div class="info">
<center>
<table>
<tr>
<td>
First Name :
<input type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name :
<input type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnSearch" value="Search" />
</td>
</tr>
</table>
</center>
</div>
<ul class="edgetoedge" id="search-results">
<li class="sep">Results</li>
</ul>
<ul id="placeholder" class="edgetoedge">
</ul>
<div class="toolbar">
<a class="back" href="#" onclick="ClearContents()">Back</a></div>
</div>
<div id="Details" style="display: none">
<div class="toolbar">
<h1>
User Details</h1>
</div>
<div class="info">
<div id="result">
</div>
</div>
<div class="toolbar">
<a class="current" href="#" onclick="jQT.goBack();">Back to results</a></div>
</div>
</div>
</body>
</html>
Please let me know what am doing wrong here.
Thanks,
Vishnu
I can't be sure why no css is being applied but the check the following
are you sure you have the right path to css and js files? for js it seems that one js file is under scripts and the other in the same folder as index, the css also seems to be in the same folder - check if that may be your problem. I'm not even sure the the scripts leads to the right path - you can try ./scripts/file
you have 2 viewports meta tags, I'm quite sure this is a mistake. they also partly contradict each other. so probably the browser would override the first one with the second one
to make sure you don't use phonegap api before the device is loaded. best practice to load the page js (besides the libraries) after the devices fires the deviceready event. like this example:
$(document).ready(function(){
document.addEventListener('deviceready',function(){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "./path/to/yourjsscript.js";//change to fit the path
document.getElementsByTagName('body')[0].appendChild(script);
},false);
});
</script>