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>
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
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
AngularJS - ng-repeat & $http.get
Edit: Tried using unique, also did not work:
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<th ng-repeat="(key, value) in elements | unique:'key'">
{{key}}
</th>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
I'm filling tables with external information using ng-repeat, but I am struggling with filling the headers. I found an example to extract the keys:
<td ng-repeat="(key, element) in elements">
However, this does not help me as I should fill the th just one time, over the data, not beside it. I also tried adding an additional ng-repeat, to no avail.
Regaring $http.get and ODATA-sources - is there any way to populate the table with all available data at once? Or anywhere I can read which tokens are accepted (did not find any information when googling)? Right now I'm only geting a max of 11 elements - and I'm not allowed to add the token to the URL the way I am doing at the moment. Is there a better way to fetch the data? Any pointers would be appreciated, please let me know if additional information is needed. This is the code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ODataResources/1.0.25/odataresources.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<script>
const BASE_URL = 'http://services.odata.org/V3/OData/OData.svc/';
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var app = angular.module('getData', []);
app.controller('fetchLinks', function($scope, $http) {
$http.get(BASE_URL)
.then(function(response) {
$scope.rawLinks = response.data;
});
});
app.controller('fetchData', function($scope, $http) {
let dynamicContent = getParameterByName('q');
console.log(BASE_URL+dynamicContent);
$http.get(BASE_URL+dynamicContent)
.then(function(response) {
$scope.rawData = response.data;
});
});
</script>
<body ng-app="getData">
<div class="container main-container">
<div class="row">
<div class="col menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul>
<div ng-controller="fetchLinks">
<li class="nav-item" ng-repeat="element in rawLinks.value">
<a class="nav-link" href="?q={{ element.url }}">{{ element.name }}</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
To repeat multiple rows, use the Special Repeat Start and End Points:
<table class="table" ng-controller="fetchData">
<tr ng-repeat-start="elements in rawData.value">
<th ng-repeat="(key, value) in elements>
{{key}}
</th>
</tr>
<tr ng-repeat-end>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This will repeat two rows; the first with keys and the second with values.
Your code does almost what I wanted to achieve, so I added an ng-if="$first" to the ng-repeat-start line
If your goal is to create only one header row, it is more efficient to do it as:
<table class="table" ng-controller="fetchData">
<tr>
<th ng-repeat="(key, value) in rawData.value[0]">
{{key}}
</th>
</tr>
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This avoids all the overhead with evaluating multiple ng-if expressions. It also assumes that every object in the rawData.value array has the same keys.
I have the following code where i'm trying to filter on the product array by checking a checkbox,but in my case list is not filtered click on the checkbox,i have set the value of city in the value of the checkbox,but list is not filtered?
//here we create the product array and display the array in the HTML page.
var app=angular.module("myApp",[]);
app.controller("myCont",function($scope){
var product = [
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
{pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
{pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
{pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
{pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"}
]
$scope.products=product;
});
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="controller.js"></script>
</head>
<style>
#count
{
color: blue;
}
#search
{
background-color: LightBlue;
}
</style>
<div class="funkyradio">
<div class="funkyradio-default">
<input type="checkbox" Agar/>
<label for="checkbox1">First Option default</label>
</div>
<div class="funkyradio-primary">
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value="'US'" data-ng-false-value=''/>US
<label for="checkbox2">Second Option primary</label>
</div>
</div>
</div>
<body ng-app="myApp" ng-controller="myCont">
<form align="center">
//Search tab for all array
Search Here<input type="text" name="uname"
ng-model="search" placeholder=" Enter data">
Hide Salary <input type="checkbox" ng-model="hideSalary">
<table class="table table-hover" align="center" border="2">
<thead id="search">
<tr>
<th>pid</th>
<th>ename</th>
<th ng-hide="hideSalary">esalary</th>
<th>
ecity
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered = (products | filter:search) | filter:search.type1 | orderBy:'ename'">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td ng-hide="hideSalary">{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
<span id="count">
<hr>
Filtered list has {{filtered.length}} items
</span>
</form>
</body>
</html>
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>