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.
Related
Account Home and Blog Home should load "Account Home working fine" and "Blog Home working fine inside" "/" URL by default without click
Should load accountHome and blogHome into account component and blog component into index.html by default.
//config
var myapp = angular.module('myapp', ["ui.router", "navbarModule", "carouselModule", "accountModule", "blogModule"]);
myapp.config(function($stateProvider,$locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$stateProvider
.state('/', {
url: "/",
views: {
"account": {
component: "account"
},
"blog": {
component: "blog"
}
}
})
.state("accountHome", {
parent: '/',
url:"",
template:"<h1>Account Home working fine</h1>"
})
.state('accountDetails', {
parent: '/',
url:"details",
template:"<h1>Account Details working fine</h1>"
})
.state("blogHome", {
parent: '/',
url:"",
template:"<h1>Blog Home working fine</h1>"
})
.state('blogDetails', {
parent: '/',
url:"details",
template:"<h1>Blog Details working fine</h1>"
})
});
//Account component
(function(angular) {
'use strict';
var accountModule = angular.module("accountModule",[]);
accountModule.component('account', {
bindings: {
},
controller: AccountController,
templateUrl: '/components/account/account.html'
});
function AccountController(){
}
})(window.angular);
//Blog component
(function(angular) {
'use strict';
var blogModule = angular.module("blogModule",[]);
blogModule.component('blog', {
bindings: {
},
controller: BlogController,
templateUrl: '/components/blog/blog.html'
});
function BlogController(){
}
})(window.angular);
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/#">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!-- UI-Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/navbar.css">
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="components/navbar/navbar.component.js"></script>
<script src="components/carousel/carousel.component.js"></script>
<script src="components/account/account.js"></script>
<script src="components/blog/blog.js"></script>
</head>
<body ng-app="myapp">
<carousel></carousel>
<nav-bar></nav-bar>
<div id="section1" class="container-fluid">
<div ui-view="account"></div>
</div>
<div id="section2" class="container-fluid">
<div ui-view="blog"></div>
</div>
</body>
</html>
<!--Account template-->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="accountHome">Account Home</a></li>
<li><a ui-sref="accountDetails">Account Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9">
<div ui-view></div>
</div>
</div>
</div>
<!--blog template-->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="blogHome">Blog Home</a></li>
<li><a ui-sref="blogDetails">Blog Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9">
<div ui-view></div>
</div>
</div>
</div>
I was looking for something like this, see config section and then use $state.go('defaultStateForSection'); to load all the default section content. Here is full code, git link If anyone has a better answer then please comment. I appreciate any better answer.
var myapp = angular.module('myapp', ["ui.router", "navbarModule", "accountModule", "blogModule"]);
myapp.config(function($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$stateProvider
//index state '/'
.state('/', {
url: "/",
views: {
"account": {
component: "account"
},
"blog": {
component: "blog"
}
}
})
//load all the default section in '/' ie. index.html i.e. /defaultStateForSection
.state("defaultStateForSection", {
parent: '/',
views: {
'accountHome#/': {
template: "<h1>Account Home is working</h1>"
},
'blogHome#/': {
template: "<h1> Blog Home is working</h1>"
}
}
})
//replace accountHome with accountDetails in /defaultStateForSection
.state('accountDetails', {
parent: 'defaultStateForSection',
url: "accountDetails",
views: {
'accountHome#/': {
template: "<h1>Account Details working fine</h1>"
}
}
})
.state('blogDetails', {
parent: 'defaultStateForSection',
url: "blogDetails",
views: {
'blogHome#/': {
template: "<h1>Blog Details working fine</h1>"
}
}
})
});
//NavBar
(function() {
'use strict';
var navbarModule = angular.module("navbarModule", []);
navbarModule.component('navBar', {
bindings: {},
controller: NavController,
templateUrl: '/components/navbar/navbar.template.html'
});
function NavController() {
$(document).ready(function() {
/* affix the navbar after scroll below header */
$("header").toggle().toggle();
$(".navbar").affix({
offset: {
top: $("header").outerHeight(true)
}
});
console.log($("#myCarousel").outerHeight(true));
});
// $('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
//instead of this we can use ng-click as well
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
console.log(hash);
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//Don't need this
// window.location.hash = hash;
});
} // End if
});
$state.go('defaultStateForSection');
}
})();
//Account
(function(angular) {
'use strict';
var accountModule = angular.module("accountModule",[]);
accountModule.component('account', {
bindings: {
},
controller: AccountController,
templateUrl:'/components/account/account.html'
});
function AccountController(){
}
})(window.angular);
//blog
(function(angular) {
'use strict';
var blogModule = angular.module("blogModule",[]);
blogModule.component('blog', {
bindings: {
},
controller: BlogController,
templateUrl: '/components/blog/blog.html'
});
function BlogController(){
}
})(window.angular);
body {
position: relative;
}
.container-fluid{
padding-left: 0px;
padding-right: 0px;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 100%;
margin: auto;
}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="myapp">
<nav-bar></nav-bar>
<div id="section1" class="container-fluid" style="min-height: 2000px">
<div ui-view="account"></div>
</div>
<div id="section2" class="container-fluid" style="min-height: 2000px">
<div ui-view="blog"></div>
</div>
</body>
<!-- Account Section -->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Pati's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="defaultStateForSection">Account Home</a></li>
<li><a ui-sref="accountDetails">Account Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
<div ui-view="accountHome"></div>
</div>
</div>
</div>
<!-- Blog Section -->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Pati's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="defaultStateForSection">Blog Home</a></li>
<li><a ui-sref="blogDetails">Blog Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
<div ui-view="blogHome"></div>
</div>
</div>
</div>
<!-- nav bar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Account</li>
<li>Blog</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view
the div element is
<div id="barcodeHtml" style="background-color: #82c6f8">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>
and the angular controller
$scope.getCanvas=function()
{
$scope.memberName=data.html.name;
$scope.memberSince=data.html.year;
$scope.imgSource=data.html.code;
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
what am I missing?
thank you in advance..
The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getConvas=function()
{
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getConvas()">get Convas</a>
</div>
</body>
</html>
There is an issue with your inline-styling.
I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.
See the working fiddle
I am creating an album where I can store images. I have attached a simple HTML for sample album. I was hoping, once the user finishes creating an album and he wants to create another one, he simply presses a plus sign. That way another template appears which is same as the one I have included in the snippet. Again, once the user clicks plus another template generates. Is there any way I can achieve this functionality? I can think of doing this with Jquery but I have to write the whole divs which is not efficient I guess. For instance, here is an example : using jquery . I was thinking if there is an efficient way of doing. That way I dont need to code the HTML each time. I am doing this using angularJs 1.x for that. Any suggestion or help is appreciated. Thank you for your time.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style="background-color: yellow; width: 40%">
<div>
<h1>1st Album </h1>
<input type="text" name="albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%">
+
</div>
</div>
</body>
</html>
One thing you can do is create a object array and loop the array using ng-repeat directive in the html.
create a object array like this
$scope.items = [{
name : "1 Album",
albumName : ""
} ]
Then use ng repeat in the DOM like this
<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%">
<div ng-repeat="item in items">
<div>
<h1> {{item.name}}</h1>
<input type="text" name="item.albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()">
+
</div>
In the plus button create a function that add new object to the array
$scope.addItem = function(){
$scope.items.push({
name : $scope.items.length+1 +" Album",
albumName : ""
})
}
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.items = [{
name : "1 Album",
albumName : ""
} ]
$scope.addItem = function(){
$scope.items.push({
name : $scope.items.length+1 +" Album",
albumName : ""
})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%">
<div ng-repeat="item in items">
<div>
<h1> {{item.name}}</h1>
<input type="text" name="item.albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()">
+
</div>
</div>
Please see my jsfiddle code here
http://jsfiddle.net/695qtssv/2/
How can I get the button to display the tooltip while its disabled?
html
<div class="panel panel-default">
<div ng-repeat="item in itemDetails" tooltip="{{item.name + (isDisabled(item.name)?' is not available' : '')}}">
<button ng-disabled="isDisabled(item.name)" class="btn btn-primary" ng-click="select(item)">{{item.name}}</button>
</div>
</div>
JS:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.myModel = "Tooltip only works when input is enabled.";
$scope.isDisabled = false;
}
I have tried using the tooltip on a div that wraps the button but still had no luck as shown in the example.
This tooltip works with but I cannot use that in the app that I am working on.
Any help would be greatly appreciated.
I think disabled elements does not not fire mouse events.
See Event on a disabled input
Based on above link I offer this kind of solution:
<div class="panel panel-default">
<div ng-repeat="item in itemDetails" style="display:inline-block; position:relative;">
<button ng-disabled="isDisabled(item.name)" class="btn btn-primary" ng-click="select(item)">{{item.name}}</button>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;" tooltip="{{item.name + (isDisabled(item.name)?' is not available' : '')}}"></div>
</div>
</div>
Fiddle: http://jsfiddle.net/695qtssv/3/
Basically it is not possible to directly set the tooltip of the input element and show it when it is disabled. This is because there are no events fired from the browser on disabled input. This is discribed in this issue.
However you are on the right way. You have to wrap the input element. I have this solution from the issue above.
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.myModel = "Tooltip only works when input is enabled.";
$scope.isDisabled = false;
}
.layer-mask {
position: relative;
}
.layer {
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
.layer-mask button[disabled] {
position: relative;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" />
<br />
<br />
<br />
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="row">
<div class="layer-mask" tooltip="My Tooltip">
<div class="layer"></div>
<button class="input-xxlarge" ng-disabled="isDisabled" ng-model="myModel">
My disabled button
</button>
</div>
<br/>
Disable/Enable <input type="checkbox" ng-model="isDisabled"/>
</div>
</div>
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);
}