I am using angular ui with bootstrap and angular-text module to build tabs builder
I am using the ng-bind-html to allow html in the tab content from angular-text module
the problem is I got broken layout after doing that
how I can solve this problem ?
here is the code
<!DOCTYPE HTML>
<html lang="en-US" ng-app="myModule">
<head>
<meta charset="UTF-8">
<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/styles.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<script>
angular.module('myModule', ['ui.bootstrap','textAngular', 'ngSanitize']);
var TabsCtrl = function ($scope) {
$scope.tabs = [];
$scope.addTab = function() {
$scope.tabs.push({
title: $scope.tab_heading ,
content:$scope.tab_content
});
};
};
</script>
<title>Angular UI</title>
</head>
<body>
<div class="tbh" ng-controller="TabsCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-bind-html="tab.content" active="tab.active" disabled="tab.disabled">
</tab>
</tabset>
<hr/>
<h3>Add Tab</h3>
<label>Tab Title</label><input type="text" ng-model="tab_heading" class="form-control"/><br/><br/>
<label>Tab Content</label>
<div text-angular="text-angular" ng-model="tab_content"></div>
<br/><br/>
<button class="btn-info btn" ng-click="addTab(); tab_content ='';tab_heading='';">Add Tab</button>
</div>
</body>
</html>
ng-bind-html you have to parse tab content using $sanitize service like ..
parse html content as trusted html for safe.. like
$scope.trustedHtml = function (html_code) {
return $sce.trustAsHtml(html_code);
}
use trusted html in ng-bind-html..like..
ng-bind-html="trustedHtml(tab.content)"
working.....
<!DOCTYPE HTML>
<html lang="en-US" ng-app="myModule">
<head>
<meta charset="UTF-8">
<link rel="stylesheet prefetch" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/styles.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<script src="ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<script>
angular.module('myModule', ['ui.bootstrap','textAngular', 'ngSanitize']);
var TabsCtrl = function ($scope, $sce) {
$scope.tabs = [];
$scope.trustedHtml = function (html_code) {
return $sce.trustAsHtml(html_code);
}
$scope.addTab = function() {
$scope.tabs.push({
title: $scope.tab_heading ,
content:$scope.tab_content
});
};
};
</script>
<title>Angular UI</title>
</head>
<body>
<div class="tbh" ng-controller="TabsCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-bind-html="trustedHtml(tab.content)" active="tab.active" disabled="tab.disabled">
</tab>
</tabset>
<hr/>
<h3>Add Tab</h3>
<label>Tab Title</label><input type="text" ng-model="tab_heading" class="form-control"/><br/><br/>
<label>Tab Content</label>
<div text-angular="text-angular" ng-model="tab_content"></div>
<br/><br/>
<button class="btn-info btn" ng-click="addTab(); tab_content ='';tab_heading='';">Add Tab</button>
</div>
</body>
</html>
try this...
Related
How do I go to next page when a button "Press me" is pressed?
Here is my code:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PaginationDemoCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button>Press me</button>
</body>
</html>
http://plnkr.co/edit/NVgCX8nrx0ovnCWE2eok?p=preview
... Your question is pretty vague, but I believe this is what you're looking for:
<button value='Press me' onClick='document.location="./NVgCX8nrx0ovnCWE2eok?p=preview"'>
In your html move your controller to the body tag and add a click event for the button
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="goToNext()">Press me</button>
</body>
</html>
In your script add a function to handle the click event. I simply increment the current page number.
angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function($scope) {
$scope.noOfPages = 20;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.goToNext = function() {
$scope.currentPage = ++$scope.currentPage;
};
};
Link to Plunk
move ng-controller="PaginationDemoCtrl" to body tag.
add directive to button ng-click="setPage(currentPage+1)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="setPage(currentPage+1)">Press me</button>
</body>
</html>
It doesn't display anything on view nor any error on console log. Have checked with case sensitives too still couldn't solve the problem. Saw other posts too still couldn't find where am making mistake. Is it necessary to use ng-resource for UI-Router?
<!DOCTYPE html>
<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
{{name}}
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>
App.js file
var app=angular.module('myApp', ['ui.router']);
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('home',
{
url:'/',
views:
{
'header':
{
templateUrl:"header.html"
},
'content':
{
templateUrl:"body.html",
controller:"productscontroller"
}
}
})
$urlRouterProvider.otherwise('/');
})
Controller.js File
var app=angular.module('myApp');
app.controller('productscontroller',
['$scope','productservice',function($scope,productservice)
{
$scope.name="kannan";
productservice.productlists().then(function(response)
{
$scope.ans=response.data;
console.log($scope.ans);
},function(response)
{
console.log(response.status);
return response.status;
});
}]);
Header.html
<body ng-app="myApp" ng-controller="productscontroller">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="home">Home</a></li>
</ul>
</body>
Body.html
<body ng-app="myApp" ng-controller="productscontroller">
<div>
<div style="height: 200px;" ng-repeat="x in ans">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive"
ng-src="{{x.imageURL1}}">
<h1>{{x.color}}</h1>
<p>{{x.brand}}</p>
<p>{{x.gender}}</p>
</div>
</div>
</body>
We have to provide ng-app="myApp" at the most root level possible. Mostly on the index.html
<body ng-app="myApp" ...
or even on the <html> (e.g. to be able to adjust <title> which is part of <head>)
<html ng-app="myApp" ...
the header.html and body.html (as shown above) would not work, because that would not trigger the application at all
I need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
I am trying to display a simple modal on click of a button. The modal does not pop up. It displays the contents on the same existing window.(snapshot attached)
My Code is below:
index.html
<!DOCTYPE html>
<html ng-app="Pcp">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="ng-dialog/js/ngDialog.min.js"></script>
<script src="ng-dialog/js/ngDialog.js"></script>
</head>
<body>
<div ng-controller="MainController">
<button ng-click="openTaskForm()">Open</button>
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('Pcp',['ngDialog']);
app.controller('MainController', function($scope, ngDialog)
{
$scope.openTaskForm = function(){
ngDialog.open({template: 'addTaskForm.html'
});
};
}
);
})();
addTaskForm.html
<div>
<h2>Contact us<h2>
<input type="text" placeholder="Name" ng-model="name" />
<input type="text" placeholder="Email" ng-model="email" />
<input type="text" placeholder="Mobile" ng-model="mobile" />
<textarea placeholder="Enter your message or query..." ng-model="message"></textarea>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click=closeThisDialog("Cancel")>Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=confirm("OK")>OK</button>
</div>
</div>
Please let me know why modal is not working.
Screenshot
You should include css files of ngDialog in header:
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="ng-dialog/js/ngDialog.min.js"></script>
<script src="ng-dialog/js/ngDialog.js"></script>
<link rel="stylesheet" th:href="#{/css/ngDialog.css}" href="../../css/ngDialog.css" > </link>
<link rel="stylesheet" th:href="#{/css/ngDialog-theme-default.css}" href="../../css/ngDialog-theme-default.css" > </link>
</head>
ngDialog.open({
template: 'addTaskForm.html',
scope : $scope,
resolve: {
data: function sendData() {
return data; // if you need to pass any data
}
}
});
I was facing same problem and implemented above suggestions by #Enigo and #Sujata but didn't help. Upon analysing further I noticed my mistake of rendering CSS files as media="print" so corrected them to media="screen" See below:
<link href='#Styles.Url("~/lib/Dialog/ngDialog-theme-default.css")' rel="stylesheet" type="text/css" media="screen" />
<link href='#Styles.Url("~/lib/Dialog/ngDialog-theme-plain.css")' rel="stylesheet" type="text/css" media="screen" />
Hope this helps. Please note #Styles.Url() is ASP.NET MVC Razor syntax.
I am using angualr bootstrap tab , I know ng-click event on tab fires any function on click of tab.
I want some dynamic content to be loaded on the first tab when form loads . The HTML is:
<html ng-app="ui.bootstrap.testData">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/en/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/en/style.css" rel="stylesheet" type="text/css" />
<link href="css/en/ng-grid.css" rel="stylesheet" type="text/css" />
<link href="css/en/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/en/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/en/icon.css" rel="stylesheet" type="text/css" />
<link href="css/en/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDataCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowAccount()">
<div id ="divAccount">
<div id ="TestAcccount" style="padding-top:30px;" align ="center">
<table id="PNRDataGrid" width="100%"></table>
</div>
</div>
</tab>
<tab heading="Policy">Policy content
<div>
<table border ="1" style ="background-color :blue"><tr><td> Test</td></tr>
</table>
</div>
</tab>
<tab heading="LoB" ng-click ="ShowLob()">LOB content
</div>
</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.js" type ="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/LossHistory.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/DataScrolling.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/ng-grid.js" type="text/javascript"></script>
The js file is:
angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope, $http) {
$scope.businessUnits = [];
$scope.lossHistory = [];
$scope.ShowAccount = function() {
$scope.loading = true;
var svcAccountURL = LHServiceDir +
'/Portal/WebServices/LossHistoryServices/LossHistoryServices.asmx/GetDetails';
....
....
}
Is there any tab event which would fire on load of form or any other way which could fire the ShowAccount function. Thanks.
You can use something like ng-init
<div ng-init="ShowAccount()">
// all your tabs here
</div>
Assuming that ShowAccount() just goes off and then fills in some data, that data will then be ready for display as soon as the page comes up.
You can also just call "ShowAccount()" at the end of your controller and it will be called when your controller loads.
You could call angular.element(document).ready(function(){ ... }) in one of the controllers:
Code Snippet:
angular.element(document).ready(function () {
console.log('In Angular Element Ready');
myInitFunction();
});
This works for me in Chrome, although I have seen issues in Firefox.