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);
}
Related
I'm trying to get handsonTable implemented in a salesforce lightning web component.
I understand that the audience here might not have Salesforce knowledge, but hoping to work together to find out what the problem could be.
Below is a very basic implementation taken from the examples, but extremely simplified.
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="hot"></div>
<script>
var dataObject = [{
id: 1,
currency: 'Euro'
}, {
id: 2,
currency: 'Japanese Yen'
}];
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
data: dataObject,
columns: [{
data: 'id',
type: 'numeric',
width: 40
}, {
data: 'currency',
type: 'text'
}],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
var hot = new Handsontable(hotElement, hotSettings);
</script>
</body>
</html>
In order to use external libraries in Salesforce Lightning Web Components (LWC), I am using the format mentioned in https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library
Modifying the HTML code above to the format mentioned gives me the LWC JS file as
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import handsonTableResource from '#salesforce/resourceUrl/handsonTable';
export default class handsonTable extends LightningElement {
dataObject = [
{
id: 1,
currency: 'Euro'
},
{
id: 2,
currency: 'Japanese Yen'
}
];
renderedCallback() {
Promise.all([
loadScript(this, handsonTableResource + '/handsontable.full.js'),
loadStyle(this, handsonTableResource + '/handsontable.full.css')
])
.then(() => {
this.initialiseHandsOnTable();
})
.catch(error => {
alert(error);
});
}
hotElement;
hotSettings;
initialiseHandsOnTable() {
this.hotElement = this.template.querySelector('div.hotElement');
this.hotSettings = {
data: this.dataObject,
columns: [
{
data: 'id',
type: 'numeric',
width: 40
},
{
data: 'currency',
type: 'text'
}
],
rowHeaders: true,
colHeaders: [
'ID',
'Currency'
]
};
new Handsontable(this.hotElement, this.hotSettings);
}
}
and the LWC html as
<template>
<div class="slds-m-around_medium">
<div class="hotElement" lwc:dom="manual"></div>
</div>
</template>
Applying these, gives me the result as below in Salesforce
(source: handsontable.com)
The DOM generated is as below
<c-handson-table data-data-rendering-service-uid="188" data-aura-rendered-by="322:0">
<div class="slds-m-around_medium">
<div class="hotElement handsontable htRowHeaders htColumnHeaders" id="ht_917e38abdce11495">
<div class="ht_master handsontable" style="position: relative; overflow: visible;">
<div class="wtHolder" style="position: relative; overflow: visible;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_bottom handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup></colgroup>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="hot-display-license-info">The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-evaluation'. <a target="_blank" href="https://handsontable.com/docs/tutorial-license-key.html">Read more</a> about it in the documentation or contact us at support#handsontable.com.</div>
</div>
</c-handson-table>
As you can see the DOM structure is being generated for handsonTable but none of the data or columns are being generated.
I do not see any errors or warning on the Chrome Dev Tools console (except the license warning from handson table)
One observation I found is that the row count seems to reflect what we see on screen.
a.countRows();
--> 2
a.countEmptyRows();
--> 0
a.countVisibleRows();
--> -1
a.countRenderedRows();
--> -1
I have been able to publish the implementation on a public facing URL. You can access my implementation at https://sandbox-business-java-1763-16aaf9f33bb.cs6.force.com/
I have added a debugger at the start of the initialiseHandsOnTable function to help.
Any assistance would be greatly appreciated.
The problem could be with Salesforce Locker Service.
Locker service restricts the scope of DOM navigation and manipulation allowed by components.
Debugging the script we found that the isVisible(elem) function was trying to navigate all the way up to the top level HTML node (which was blocked by the Locker Service).
The answer at https://forum.handsontable.com/t/handsontable-within-the-salesforce-locker-service/1014 helped in fixing this.
We updated the the isVisible(elem) function as below:
Change
next = next.parentNode; to
if(next.parentNode != null)
next = next.parentNode;
else
return true;
Now, the solution works.
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>
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>
I have a multiple tab Html page . On one tab i have add 3 input box and an add button. Whenever the add button is clicked the data to be added into a grid below. But scope is not accessing these variables. Attaching my code below :
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="tabs">
<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>
</div>
<script type ="text/javascript" id="one.tpl.html">
<div class="form-group">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="names" />{{name}}
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Employees</label>
<div class="col-md-4">
<input type="text" class="form-control" name="employees"
ng-model="employeess" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Headoffice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="headoffice"
ng-model="headoffices" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="button" value="Add" ng-click="addRow()" class="btn btn-primary"/>
</div>
</div>
<div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{{company.name}}
</td>
<td>{{company.employees}}
</td>
<td>{{company.headoffice}}
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Test 2</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree">
<h1>View Three</h1>
<p>Test 3</p>
</div>
</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.companies = [];
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.names, 'employees': $scope.employeess, 'headoffice':$scope.headoffices });
$scope.names='';
$scope.employeess='';
$scope.headoffices='';
}
});
</script>
<style>
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
</body>
</html>
Following variables are not accessible in scope :
$scope.names
$scope.employeess
$scope.headoffices
That's because ng-template creates child scope, so you can basically do one of 2 things:
Access properties via $parent (like $parent.employeess). Example:https://plnkr.co/edit/2LLakRumEB25wyNhNmDg?p=preview)
Define object for new item like below.
Example:
https://plnkr.co/edit/sFkim5WwN5ffPsWtdcDP?p=preview
$scope.newRow = {
names: '',
employeess: '',
headoffices: ''
}
And access them via the same prefix:
ng-model="newRow.employeess"
Explanation:
Scopes have common structure, where $parent property is the parent scope e.t.c up to $rootScope.
When you're using ng-template it creates a new child scope, so the values, assigned within it are stored in the child scope and not in $parent (your controllers scope). The values you're searching for are in child scope because ng-model works in current scope. So you need to make sure that ng-model knows which scope to write. It can be done via $parent parameter or within object. As for 2nd option - the reason is simple. Object value can't be assigned when object is undefined, so search goes to upper level and so on.
i have a simple project of angularjs.
Problem
after login when i redirected to login.html , it continuously sends request and page is reloaded again and again
please help following is code
demoangular.js
<!DOCTYPE html>
<html data-ng-app="customerApp">
<head>
<title>Angular js</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script>
</script>
</body>
</html>
HEllo.html
<h1>Welcome To Angular</h1>
<form id="main" data-ng-submit="login()">
<input name="name" id="user" type="text" data-ng-model="cardentials.username" required />
<input name="url" id="pass" type="password" data-ng-model="cardentials.password" required />
<button>new</button>
</form>
logout.html
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
app.js
var demoapp = angular.module('customerApp', ['ngRoute']);
demoapp.config(function ($routeProvider) {
$routeProvider.when('/hello', {
controller: 'SimpleController',
templateUrl: 'partials/hello.html'
});
$routeProvider.when('/logout', {
controller: 'newController',
templateUrl: '/logout.html'
});
$routeProvider.otherwise({ redirectTo: '/hello' });
});
demoapp.factory("authser", function ($location, $http) {
return {
login: function (cardentials) {
if (cardentials.username != "jot") {
alert("its ");
}
else {
$location.path('/logout');
}
},
logout: function () {
$location.path('/hello');
}
}
})
demoapp.controller('SimpleController', function ($scope, authser) {
$scope.cardentials = { username: "", password: "" };
$scope.login = function () {
authser.login($scope.cardentials);
};
});
demoapp.controller('newController', function ($scope, authser) {
$scope.logout = function () {
authser.logout();
};
});
var url = 'api/Customers/';
demoapp.factory('customerFactory', function ($http) {
return {
getCustomer: function () {
return $http.get(url);
},
addCustomer: function (customer) {
return $http.post(url, customer);
},
deleteCustomer: function (customer) {
return $http.delete(url + customer.CustomerID);
},
updateCustomer: function (customer) {
return $http.put(url + customer.Id, customer);
}
};
});
demoapp.controller('CustomersController', function PostsController($scope, customerFactory) {
$scope.customers = [];
$scope.loading = true;
$scope.addMode = false;
$scope.toggleEdit = function () {
this.customer.editMode = !this.customer.editMode;
};
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
$scope.save = function () {
//$scope.loading = true;
var cust = this.customer;
customerFactory.updateCustomer(cust).success(function (data) {
alert("Saved Successfully!!");
cust.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// add Customer
$scope.add = function () {
$scope.loading = true;
customerFactory.addCustomer(this.newcustomer).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.customers.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Adding customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// delete Customer
$scope.delcustomer = function () {
$scope.loading = true;
var currentCustomer = this.customer;
customerFactory.deleteCustomer(currentCustomer).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.customers, function (i) {
if ($scope.customers[i].CustomerID === currentCustomer.CustomerID) {
$scope.customers.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
//get all Customers
customerFactory.getCustomer().success(function (data) {
$scope.customers = data;
$scope.loading = false;
})
.error(function (data) {
$scope.error = "An Error has occured while loading posts! " + data.ExceptionMessage;
$scope.loading = false;
});
});
Solved it
updated logout.html
#callmekatootie thanks for your help
kudoo
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>