I am trying to generate a table with the help of angular.js but I am not able to. I am a newbie to this. Can someone please help me figure out what is wrong with my code? I am sorry if this is a repetition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dashboard</title>
<style>
body {
width: 80%;
margin: 0px auto;
}
table{
table-layout:fixed;
width:100%;
}
#f1 {
background-color:#A9A9A9;
border-style: solid;
border-width: 1px;
padding: 20px 0px 20px 20px;
}
.info {
color: #A9A9A9;
margin: 0px 0px;
display: block;
}
</style>
<script>
var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
$scope.records = [
{
Age: "13",
Title: "Some Title",
Artist: "Artist",
Album : "Album",
Version : "Version",
Label: "Label",
}
];
}]);
</script>
</head>
<body bgcolor="#DCDCDC" ><!--ng-app="Dashboard" >ng-controller="DashboardController" -->
<div >
<!-- Logic for refresh button -->
<h3>Dashboard</h3>
<br>Showing results of entries <br>
<br>
<button ng-click="">Refresh</button>
<br>
<br>
<div ng-app="qDashboard" ><!--ng-controller="qDashboardController" -->
<div ng-controller="qDashboardController" >
<table >
<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
<tr ng-repeat="x in records">
<td ><button ng-click="">Approve</button></td>
<td ><button ng-click="">Update</button></td>
<td><button ng-click="">Keep Inactive</button></td>
<td>{{x.Age}}</td>
<td>{{x.Title}}</td>
<td>{{x.Artist}}</td>
<td>{{x.Album}}</td>
<td>{{x.Version}}</td>
<td>{{x.Label}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
There is no issue with your logic, check if your angular script is loading, wrap it inside <head> or <body>
DEMO
var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
$scope.records = [
{
Age: "13",
Title: "Some Title",
Artist: "Artist",
Album : "Album",
Version : "Version",
Label: "Label",
}
];
}]);
body {
width: 80%;
margin: 0px auto;
}
table{
table-layout:fixed;
width:100%;
}
#f1 {
background-color:#A9A9A9;
border-style: solid;
border-width: 1px;
padding: 20px 0px 20px 20px;
}
.info {
color: #A9A9A9;
margin: 0px 0px;
display: block;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body bgcolor="#DCDCDC" >
<h3>Dashboard</h3>
<br>Showing results of entries <br>
<br>
<button ng-click="">Refresh</button>
<br>
<br>
<div ng-app="qDashboard" >
<div ng-controller="qDashboardController" >
<table >
<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
<tr ng-repeat="x in records">
<td ><button ng-click="">Approve</button></td>
<td ><button ng-click="">Update</button></td>
<td><button ng-click="">Keep Inactive</button></td>
<td>{{x.Age}}</td>
<td>{{x.Title}}</td>
<td>{{x.Artist}}</td>
<td>{{x.Album}}</td>
<td>{{x.Version}}</td>
<td>{{x.Label}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Related
This my code.... in this material css is not geting applied to input fields and they are appearing as normal html inputs.
I have used material css and js cdns and both of them are same versions. I dont know why its not working. I checked other posts in stackoverflow but i didn't got the solution. so, Somebody please help me with this thing...
var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
$mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {
});
.header {
text-align: center;
height: 80px;
margin-left: 555px !important;
line-height: 80px;
color:white;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Verdana,sans-serif;
font-size: 12px;
color: #111;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login to Data Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
<div ng-app="sdp" ng-controller="MyCtrl">
<md-toolbar style="background: #174a7a;">
<div class="md-toolbar-tools">
<h1 class="header">LOGIN</h1>
</div>
</md-toolbar>
</div>
<div>
<md-card >
<md-card-content>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card</span>
</md-card-title-text>
</md-card-title>
<ng-form name="colorForm">
<div layout-gt-xs="row">
<md-input-container>
<label> Username </label>
<input ng-model="un" required>
</md-input-container>
<md-input-container>
<label> Password </label>
<input ng-model="pswd" required>
</md-input-container>
</div>
</ng-form>
</md-card-content>
</md-card>
</div>
</body>
</html>
You've placed the ng-app on your toolbar div, so your AngularJS app is only working inside that part of the page.
Remove it from there and add it to your body tag to have it affect all of your page, like so:
<body ng-app="sdp">
<div ng-controller="MyCtrl">
...
Here's the full code with the change:
var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
$mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {
});
.header {
text-align: center;
height: 80px;
margin-left: 555px !important;
line-height: 80px;
color:white;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Verdana,sans-serif;
font-size: 12px;
color: #111;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login to Data Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body ng-app="sdp">
<div ng-controller="MyCtrl">
<md-toolbar style="background: #174a7a;">
<div class="md-toolbar-tools">
<h1 class="header">LOGIN</h1>
</div>
</md-toolbar>
</div>
<div>
<md-card >
<md-card-content>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card</span>
</md-card-title-text>
</md-card-title>
<ng-form name="colorForm">
<div layout-gt-xs="row">
<md-input-container>
<label> Username </label>
<input ng-model="un" required>
</md-input-container>
<md-input-container>
<label> Password </label>
<input ng-model="pswd" required>
</md-input-container>
</div>
</ng-form>
</md-card-content>
</md-card>
</div>
</body>
</html>
I want to make a table, but as it is responsive to some extent we all know that. Do anybody know what will be best replacement for making table without using table tag.
I have provided the basic table html, help me with that.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Fully responsive table
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This worked for me. Reference :- https://elvery.net/demo/responsive-tables/
I have a modal Bootstrap, inside a call is made $http with Angular.
But only when loading the page goes to the server and retrieves the data, the question is:
Is it possible to make the call to "http" every time the Bootstrap Modal is opened?
var helloApp = angular.module('helloApp',[]);
helloApp.controller("CompanyCtrl",['$scope',function($scope){
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.tableTitle = "SEMESTRE ";
$scope.checked1 = false; //DELETE
$scope.number = 7;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.companies = [
{ 'name':'Infosys Technologies',
'employees': 125000,
'headoffice': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'employees': 100000,
'headoffice': 'Bangalore'},
{ 'name':'Wipro',
'employees': 115000,
'headoffice': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'employees': 150000,
'headoffice': 'Bangalore'},
{ 'name':'HCL Technologies',
'employees': 90000,
'headoffice': 'Noida'},
];
$scope.vAddGroup = [
];
$scope.addGroup = function(name){
var index = -1;
var comArr = eval( $scope.companies );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
$scope.checked1 = true;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subjectOK not-active";
};
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
$scope.name='';
$scope.employees='';
$scope.headoffice='';
};
$scope.removeRow = function(name){
var index = -1;
var comArr = eval( $scope.vAddGroup );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.splice( index, 1 );
$scope.checked1 = false;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subject";
};
}]);
helloApp.controller('DataCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.content = response.data.records;
}, function(response) {
$scope.contentWrong = response.config;
});
});
function closeModal(){
$(".modalCloseID").on('hide.bs.modal', function () {
});
console.log("TEST");
$('.modalCloseID').modal('hide');
}
.subject {
background-color: #4CAF50; /* Green */
/* border: none; */
border: 1px solid white;
border-radius: 4px;
color: white;
padding: 1px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
cursor: hand;
line-height:20px;
-webkit-transition-duration: .4s; /* Safari */
transition-duration: .4s;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.subject:hover {
background-color: #241E4E;
color: white;
border: 1px solid #555555;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.subject:focus {
outline:0px;
}
.subjectOK {
background-color: white;
/* border: none; */
border: 2px solid black;
border-radius: 30%;
color: black;
padding: 1px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor:not-allowed;
line-height:20px;
-webkit-transition-duration: .4s; /* Safari */
transition-duration: .4s;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.csstr {
border: 0px solid black;
}
.csstitle {
border-left: 6px solid red;
background-color: lightgrey;
}
.not-active {
pointer-events: none;
cursor: default;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<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="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<h2 class="csstitle">Seleccionar Materias</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
</tr>
</thead>
<tbody ng-app="helloApp" ng-controller="DataCtrl">
<tr class="csstr" ng-repeat="item in content | limitTo: 7">
<td> <!-- SEMESTRE #1 -->
<div id="{{numbers[0]}}" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
</td>
<td><!-- SEMESTRE #2 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
</td>
<td><!-- SEMESTRE #3 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>
</td>
<td><!-- SEMESTRE #4 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>
</td>
<td><!-- SEMESTRE #5 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>
</td>
<td><!-- SEMESTRE #6 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>
</td>
<td><!-- SEMESTRE #7 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>
</td>
<td><!-- SEMESTRE #8 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>
</td>
<td><!-- SEMESTRE #9 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
<!-- Modal -->
<div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Materia # {{item}}</h4>
</div>
<div class="modal-body">
<p>Seleccione un horario.</p>
<label>Filtro</label>
<input type="text" class="form-control" ng-model="searchKeyword"/>
<div ng-app="helloApp" ng-controller="DataCtrl">
{{content}}
{{contentWrong}}
</div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="company in companies | filter: searchKeyword ">
<td>
{{company.name}}
</td>
<td>
{{company.employees}}
</td>
<td>
{{company.headoffice}}
</td>
<td>
<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL-->
</div>
<hr>
<h2 class="csstitle">Materias seleccionadas</h2>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="item in vAddGroup">
<td>
{{item.name}}
</td>
<td>
{{item.employees}}
</td>
<td>
{{item.headoffice}}
</td>
<td>
<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
</td>
</tr>
</table>
</body>
</html>
Below is the easy "as little changes as possible" answer:
I added ng-click on your buttons and wrapped your http-call in a function which is called when clicking any of the buttons.
The longer (and more correct) answer would include:
Probably scrapping jquery from your project all together, because angular and jquery really doesn't play all that well together.
ng-controller="DataCtrl" ng-repeat="item in numbers" When you do this, you get one DataCtrl-instance for each "item". Usually with angular and modals, you only want one modal and change the content as you show and hide it. (When your app is small anyway.)
You have made things a little bit DRY-er by looping through your numbers for each column with buttons. I would probably take that further and create a directive for a "subject-button" (Since the code here is almost identical in every button). And loop through each row as well.
Maybe have a look at UI Bootstrap. But in time you'll probably figure out that the quick fix for modals in angular is to skip all other dependencies and just use something like ng-class="'show-modal':showModal". Bootstrap-scripts, data-toggles and jquery are just adding layers to something that is already very simple with straight up angular/css.
var helloApp = angular.module('helloApp',[]);
helloApp.controller("CompanyCtrl",['$scope',function($scope){
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.tableTitle = "SEMESTRE ";
$scope.checked1 = false; //DELETE
$scope.number = 7;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.companies = [
{ 'name':'Infosys Technologies',
'employees': 125000,
'headoffice': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'employees': 100000,
'headoffice': 'Bangalore'},
{ 'name':'Wipro',
'employees': 115000,
'headoffice': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'employees': 150000,
'headoffice': 'Bangalore'},
{ 'name':'HCL Technologies',
'employees': 90000,
'headoffice': 'Noida'},
];
$scope.vAddGroup = [
];
$scope.addGroup = function(name){
var index = -1;
var comArr = eval( $scope.companies );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
$scope.checked1 = true;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subjectOK not-active";
};
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
$scope.name='';
$scope.employees='';
$scope.headoffice='';
};
$scope.removeRow = function(name){
var index = -1;
var comArr = eval( $scope.vAddGroup );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.splice( index, 1 );
$scope.checked1 = false;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subject";
};
}]);
helloApp.controller('DataCtrl', function($scope, $http) {
$scope.openModal = function(){
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.content = response.data.records;
}, function(response) {
$scope.contentWrong = response.config;
});
};
$scope.openModal();
});
function closeModal(){
$(".modalCloseID").on('hide.bs.modal', function () {
});
console.log("TEST");
$('.modalCloseID').modal('hide');
}
.subject {
background-color: #4CAF50; /* Green */
/* border: none; */
border: 1px solid white;
border-radius: 4px;
color: white;
padding: 1px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
cursor: hand;
line-height:20px;
-webkit-transition-duration: .4s; /* Safari */
transition-duration: .4s;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.subject:hover {
background-color: #241E4E;
color: white;
border: 1px solid #555555;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.subject:focus {
outline:0px;
}
.subjectOK {
background-color: white;
/* border: none; */
border: 2px solid black;
border-radius: 30%;
color: black;
padding: 1px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor:not-allowed;
line-height:20px;
-webkit-transition-duration: .4s; /* Safari */
transition-duration: .4s;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.csstr {
border: 0px solid black;
}
.csstitle {
border-left: 6px solid red;
background-color: lightgrey;
}
.not-active {
pointer-events: none;
cursor: default;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<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="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<h2 class="csstitle">Seleccionar Materias</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
</tr>
</thead>
<tbody ng-app="helloApp" ng-controller="DataCtrl">
<tr class="csstr" ng-repeat="item in content | limitTo: 7">
<td> <!-- SEMESTRE #1 -->
<div id="{{numbers[0]}}" class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
</td>
<td><!-- SEMESTRE #2 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
</td>
<td><!-- SEMESTRE #3 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>
</td>
<td><!-- SEMESTRE #4 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>
</td>
<td><!-- SEMESTRE #5 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>
</td>
<td><!-- SEMESTRE #6 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>
</td>
<td><!-- SEMESTRE #7 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>
</td>
<td><!-- SEMESTRE #8 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>
</td>
<td><!-- SEMESTRE #9 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
<!-- Modal -->
<div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Materia # {{item}}</h4>
</div>
<div class="modal-body">
<p>Seleccione un horario.</p>
<label>Filtro</label>
<input type="text" class="form-control" ng-model="searchKeyword"/>
<div ng-app="helloApp" ng-controller="DataCtrl">
{{content}}
{{contentWrong}}
</div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="company in companies | filter: searchKeyword ">
<td>
{{company.name}}
</td>
<td>
{{company.employees}}
</td>
<td>
{{company.headoffice}}
</td>
<td>
<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL-->
</div>
<hr>
<h2 class="csstitle">Materias seleccionadas</h2>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="item in vAddGroup">
<td>
{{item.name}}
</td>
<td>
{{item.employees}}
</td>
<td>
{{item.headoffice}}
</td>
<td>
<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
</td>
</tr>
</table>
</body>
</html>
could you please tell me how toggle rows in angular .In other words I made one simple project of collapsible row example in angular it will expand when user click on row same as in Accordion .So my problem is that when I click on first row it open or expand the third row why ? only first row will expand ..can we add some liner transition in that it look like slide up and slide down way .
click first row it expand the third row why ?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
<script src="script.js"></script>
</head>
<style>
.bg {
background: lightgray;
position: relative;
}
.ptag {
position: absolute;
top:0;
left:0;
width: 7%;
border: 1px solid red;
height: 100%;
background: lightblue;
color: white;
}
.circle{
width: 50px;
height: 50px;
float: right;
border-radius: 100%;
background: green;
margin-top: -7%;
line-height: 50px;
text-align: center;
color:black!important;
}
</style>
<body ng-app="app">
<div ng-controller="apptes">
<div class="list card">
<div class="item item-avatar bg" ng-click="clickrow()" ng-repeat="n in obj">
<p class="ptag">P</p>
<h2>{{n.number}}</h2>
<p>{{n.name}}</p>
<p class="circle">650</p>
</div>
<div ng-show="toogle_item">
<div class="item item-body" >
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
1 Like
5 Comments
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</div>
</div>
</body>
</html>
can we add slide up and slide in that slow motion ?
Here is what you want, or at least a starting layout:
HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic Accordion</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Accordion List</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<div ng-repeat="group in groups">
<ion-item class="item-stable"
ng-click="toggleGroup(group)"
ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Group {{group.name}}
</ion-item>
<ion-item class="item-accordion"
ng-repeat="item in group.items"
ng-show="isGroupShown(group)">
{{item}}
</ion-item>
</div>
</ion-list>
</ion-content>
</body>
</html>
JS:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.groups = [];
for (var i=0; i<10; i++) {
$scope.groups[i] = {
name: i,
items: []
};
for (var j=0; j<3; j++) {
$scope.groups[i].items.push(i + '-' + j);
}
}
/*
* if given group is the selected group, deselect it
* else, select the given group
*/
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
CSS:
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
/*
* http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
*/
.list .item.item-accordion {
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
display: block !important;
}
Code Pen: http://codepen.io/ionic/pen/uJkCz
I have simple angularjs tab on html and i want to post the data to rest based api.
My Query is how to get the control value from tab and post to rest based api
Here i my code...
I have tired several example to getting tabs,but got no success.
validationApp.controller('TabsCtrl', function($scope, $http, $location, $window, $routeParams) {
var headerValue = $routeParams.auth;
alert(headerValue);
$scope.tabs = [{
title: 'Upload Configuration',
url: 'upload.tab.html'
}
];
$scope.currentTab = 'upload.tab.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.uploadFile = function(vmUploadme, myName) {
var fd = new FormData();
//Take the first selected file
// fd.append("file", files[0]);
debugger;
fd.append("file", $scope.vmUploadme);
fd.append("name", $scope.myName);
alert($routeParams.auth);
uploadUrl = "MyLinktoRESTBASEAPIupload1";
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {
'Content-Type': undefined,
'Authorization': $routeParams.auth
},
transformRequest: angular.identity
}).
success(function(data, status, headers, config) {
alert(data);
//TODO
}).
error(function(data, status, headers, config) {
alert("failure");
});
};
});
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 2px 5px 5px;
background-color: #CCC;
font: 12px tahoma, arial, verdana, sans-serif;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
height: 450px;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
<!DOCTYPE html>
<html>
<head>
<!-- JS -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="script/angular/js/angular.js"></script>
<script src="script/angular/js/angular-route.min.js"></script>
<script src="script/angular/js/ngProgress.js"></script>
<script src="script/custom/js/app.js"></script>
<script src="script/custom/js/landingPage.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body id="ng-app" ng-app="LoginApp">
<script type="text/ng-template" id="html/login.html">
<div ng-controller="mainController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<div id="area" class="area">
</div>
</form>
</div>
</script>
<div ng-view></div>
<script type="text/ng-template" id="html/landingPage.html">
<div id="tabs" ngController="TabsCtrl" class="area">
<table class="stdTable" border="0">
<tr>
<td>
<table width="100%" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<cols width="95%">
<cols width="5%">
<tr>
<td rowspan="3" align="center">
<h2> Landing Page</h2>
</td>
<td align="right">
<a ng-click="logout();">
<label class="avLogin-Label">Logout</label>
</a>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Status:Running</label>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Welcome:Administrator</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="upload.tab.html">
<div id="viewOne">
<h1>View One</h1>
<input type="text" name="name" ng-model="myName" />
<input type="file" fileread="vmUploadme" />
<input type="button" name="button" value="Upload" ng-click='uploadFile(vmUploadme,myName)' />
</div>
</script>
<script type="text/ng-template" id="bulk.tab.html">
<div id="viewTwo">
<h1>View Two</h1>
<h2> Bulk User Setup </h2>
{{message}}
</div>
</script>
</body>
</html>
The Problem was with scope of div in angularjs
$scope.upload = { fileName: '', uploadFile: '' };
$scope.uploadFile = function(){
alert($scope.upload.uploadFile);
}