I've been trying to get my code to save all the components from a table to a database. I thought that if I could save every element that was added to the table into an array, then I could send it to my database, but I don't know if that is the best idea, nor if I am doing it correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/css/colors.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!--Local Stylesheets-->
<link rel="stylesheet" href="css/style.css">
<!--/local Stylesheets-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="handsontable_basic.js"></script>
</head>
<body ng-controller="MainController">
<div class="container">
<div ng-app="productsTableApp" class="table-editable">
<div ng-controller="ProductsController">
<span class="glyphicon glyphicon-plus"></span>
<div class="table-responsive">
<table class="table">
<tr>
<th>Id</th>
<th>Fornecedor</th>
<th>Código do Produto</th>
<th>Deletar</th>
</tr>
<tr ng-repeat="dataum in data"">
<td contenteditable="true">
<input class="form-control" type="text" name="teste" ng-model="dataum.id" placeholder="Forneça o Id">
</td>
<td>
<input class="form-control" type="text" name="teste" ng-model="dataum.fornecedor" placeholder="Forneça o Fornecedor">
</td>
<td>
<input class="form-control" type="text" name="teste" ng-model="dataum.codProduto" placeholder="Forneça o Código do Pruduto"></td>
<td>
<span class="glyphicon glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
</div>
<button id="export-btn" data-ng-click="exportTable" class="btn btn-primary">Exportar Dados</button>
</div>
<pre>{{data | json}}</pre>
</div>
</div>
</body>
</html>
<script>
angular.module('productsTableApp', [])
.controller('ProductsController', function($scope){
$scope.aux = 0;
// Inicializando Array
$scope.data=[
{id: "001", fornecedor: "Larissa Fornecedor", codProduto: "431"},
{id: "002", fornecedor: "Carlos Fornecedor", codProduto: "523"},
{id: "003", fornecedor: "Rodrigo Fornecedor", codProduto: "123"}
];
// Remove a linha selecionada pelo index
$scope.removeRow = function(index){
$scope.data.splice( index, 1);
};
//Adiciona uma linha no array
$scope.addRow = function(){
$scope.data.push({id: "", fornecedor: "", codProduto: ""})
};
//Envia o conteúdo da tabela para o servidor
$scope.exportTable = function(){
$scope.table[data];
$scope.tabela.push()
};
});
</script>
Related
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
I have a simple table and every next row is added by clicking "Append" button.
I need to highlight matches between search input field with table input fields.
Trying to use highlight filter to achieve this, but it it runs with an error:
"TypeError: Cannot read property 'replace' of undefined"
How could I fix it? Example code below:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<div ng-repeat="x in arr | filter:search.text" ng-bind-html="x.text | highlight:search.text"></div>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
The issue here is that your filter takes input text as first parameter, but you are passing a field that is not defined on your model: ng-bind-html="x.text | highlight:search.text". You have fields data1 and data2 but not text, that is why you are getting the mentioned error.
Your filter is actually working, but you have to pass a proper input parameter into it:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<br style="clear: both;"/>
<ul>
<li ng-repeat="x in arr | filter:search.text">
<span ng-bind-html="x.data1 | highlight:search.text"></span>
<span ng-bind-html="x.data2 | highlight:search.text"></span>
</li>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
I am trying to do load an html page using angularJS.
My HTML page is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TSAPI Profiles list</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="main.js"></script>
<style type="text/css">
.container{
margin: 20px;
}
</style>
</head>
<body>
<div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController">
<div class="col-md-4">
<p> <h4> TSAPI Profiles </h4> <br><br></p>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>TSAPIProfile Name</td>
<td>ACD#</td>
<td>HUB...</td>
</tr>
<tr>
<td>AESServerPrimary</td>
<td>NorthACDTSAPI1</td>
<td>NorthACD</td>
</tr>
<tr>
<td>North</td>
<td>AESNorth1</td>
<td>ManualCBSDetails</td>
</tr>
</tbody>
</table>
<!-- Button -->
<div class="btn-group-justified" >
<div class="col-md-4" style="margin-left: 400px;" >
<button name="savebutton" class="btn btn-primary" type="button" ng-click="add()">Add</button>
<button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()">Edit</button>
<button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()">Remove</button>
</div>
</div>
</div>
</body>
</html>
And my JS file is like:
var app = angular.module('TSAPIProfiles', [])
app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
$scope.add = function () {
$location.path('TSAPIProfileCreate.html');
}
}]);
When I click on add button it doesn't load the TSAPIProfileCreate.html. I could not able to find the reason.
Try to follow Manikandan answer because it's the right way to do this (or use ui-router), but if you really want to make a redirection like this, use : $window.location.href like this
$location.path('TSAPIProfileCreate.html'); // This is bad
$location.path returns the part of the URL after the slash NOT including search string parameters (after the question mark).
Create View then use $location.path.
https://docs.angularjs.org/api/ngRoute/directive/ngView
$location.path('TSAPIProfileCreate');
https://docs.angularjs.org/guide/$location
I am new to angularjs,can someone please help to resolve my issue.I have an index.html page,where it has a logo and some message,along with that i have a text box where i ask employeeID as a input.On entering the employeeID i would want the page to be routed to portal.html ,where i will have to display the the employee details in a form.But the form displays blank input fields.I am using restservice which would return a JSON object as below
[
{
Emp_Id: 123,
Emp_Name: "abc",
Email: "abc#jkl.com",
Primary_Skill: "angularjs",
}
]
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<!-- Bootstrap 3 css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/basicPage.css">
</head>
<body ng-app="routeApp">
<div ng-view></div>
</body>
</html>
portal.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Employee Details</p>
<form>
Employee Id : <input type="text" ng-model="empPortal.Emp_Id" required></br></br>
Employee Name : <input type="text" ng-model="empPortal.Emp_Name" required></br></br>
Email Id : <input type="text" ng-model="empPortal.Email" required></br></br>
Primary Skill : <input type="text" ng-model="empPortal.Primary_Skill" required></br></br>
</form>
</body>
</html>
main.html
<form>
<div class="text-center">
<h1 class="ex1">Welcome to the portal!</h1>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>COMPETENCY MANAGEMENT is the system's ability to connect various competencies/skill sets.</p>
</div>
<div class="col-md-5">
<div class="one">
<h2 class ="ex2">Please enter your Employee ID</h2>
<label>Employee ID:</label>
<input ng-model="empID" size= "15" required>
<button type="submit" class="btn btn-default btn-sm" ng-click="submit()">Submit</button>
</div>
</div>
<div class="col-md-4">
<img ng-src="{{image}}" class="img-rounded" width="380" height="220">
</div>
</div>
</div>
</div>
</form>
app.js
var routeApp = angular.module("routeApp", ["ngRoute"]);
routeApp.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "partials/main.html",
controller : "empDetailsCtrl"
})
.when("/submit", {
templateUrl : "partials/portal.html",
})
.otherwise({
redirectTo:'/'
});
});
routeApp.controller("empDetailsCtrl",['$scope','$http','$log','$location',function ($scope,$http,$log,$location) {
$scope.image = "http://hrm-storitve.si/uploads/files/slika_13x.jpg";
$scope.submit = function(){
if ($scope.empID != null){
$http.get('http://localhost:5555/com.vog.jersey.first/rest/empService/getEmployeeDetails?employeeId='+$scope.empID')
.success(function(data)
{
$scope.empPortal = data;
$location.path('/submit');
})
.error(function(err){
$log.error(err);
})
}
else
{
$location.path('/');
}
};
}]);