I'm using version 0.14.1 and my code is:
<div class="clearfix mbot20">
<h3 class="pull-left">Skill Category SORT: {{filterSelected}}</h3>
<span class="pull-right pathways-modal-popover-container">
<span class="sm-round-btn" popover-placement="bottom" uib-popover-template="data.sortUrl" popover-trigger="'none'" tabindex="0" popover-is-open="filterSelected === 'sort'">
<a class="clr-white" ng-click="filterSelected = 'sort'"><i class="glyphicon glyphicon-sort"></i></a>
</span>
<span class="sm-round-btn" popover-placement="bottom" uib-popover-template="data.filterUrl" popover-trigger="'none'" tabindex="0" popover-is-open="filterSelected === 'filter'">
<a class="clr-white" ng-click="filterSelected = 'filter'"><i class="glyphicon glyphicon-filter"></i></a>
</span>
</span>
</div>
So the idea is that you can click on either span and it should load the appropriate popover, but only one popover can be opened at a time. That's being controlled by filterSelected.
Now the behavior is strange. If I click on one of them, nothing happens. When I click again, the popover loads fine. When I click the other one, the popover disappears. Then I have to click the other one again.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.1.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body ng-controller="PopoverDemoCtrl" ng-click="filterSelected='none'" style="height: 100%;">
<div>
<button popover-placement="bottom" uib-popover="On the Top!" type="button" popover-is-open="filterSelected === 'sort'" popover- trigger="'none'" ng-click="filterSelected == 'sort' ? filterSelected = 'none' : filterSelected = 'sort';$event.stopPropagation();"
class="btn btn-default">Top</button>
<button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default" popover-trigger="'none'" popover-is-open="filterSelected === 'filter'" ng-click="filterSelected == 'filter' ? filterSelected = 'none' : filterSelected = 'filter';$event.stopPropagation();">Bottom</button>
</div>
</body>
</html>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
/* Styles go here */
html, body {
height: 100%;
}
Think it should work, check
`http://plnkr.co/edit/dnuP47muv2OSxYXjqtc2?p=preview`
Make sure when you click you really click on tag a not the space between a and span
Related
I've created the template with the below code. The edit functionality works fine however the model is updating back.
In the template, I've binded the model with ng-model but still it is not updating the model hobbies back on editing
Any ideas?
<html>
<head>
<title>
Angular Edit Template
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.js"></script><!-- Latest compiled and minified CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.hobbies = ["Swimming", "Reading"]
})
.directive('component', function(){
return {
template: [
'<div>',
'<span ng-show="!editing">{{ value }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
'</div>'
].join(''),
restrict: 'E',
scope: {
value: '=value'
},
link: function($scope){
$scope.editing = false;
}
}
});
</script>
</head>
<body>
<div id="test" ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="n in hobbies">
<li>
<component value="n"></component>
</li>
</ul>
<span>{{ hobbies }}</span>
</div>
</body>
</html>
Take a look at this, the issue is you're two way binding a string, instead of an object, which means you're not actually getting the benefits: If you are not using a .(dot) in your AngularJS models you are doing it wrong?
If you use an object in either your parent, either passing the value or the whole object, you'll see that it works a little better.
$scope.hobbies = [{id:1,name:"Swimming"},{id:2,name:"Reading"}]
and then
<ul ng-repeat="n in hobbies">
<li>
<component value="n.name"></component>
</li>
</ul>
or
'<span ng-show="!editing">{{ value.name }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value.name"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
I want to display the alias beside the age when I click a button. or when I click a name, I want the alias to be displayed besides the age of that person.
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" rel="stylesheet"></script>
<style>
li {color: orange;
background-color: black;
padding: 5px;
text-align: center;
}
</style>
<script>
var myApp= angular.module("myApp",[]);
myApp.controller("myCtrl", function($scope){
$scope.residents= [
{fname:"Jekin", lname:"Rajal", age:29, alias:"Jek"},
{fname:"Jaydip", lname:"Vasoya", age:24, alias:"JD"},
{fname:"Melvin", lname:"Matthew", age:23, alias:"Anna"}]
});
</script>
</head>
<body>
<div class="container-fluid" ng-controller="myCtrl" >
<ul>
<li type="none" ng-repeat="resident in residents">{{resident.fname}} {{resident.lname}}, {{resident.age}} </li>
</ul>
<br/>
<button type="button" class="btn btn-info" ng-click="fucn"> Click to show alias</button>
</div>
</body>
</html>
You can try wrapping the alias inside a <div> which is conditionally revealed after the user clicks the button:
<ul>
<li type="none" ng-repeat="resident in residents">
{{resident.fname}} {{resident.lname}}, {{resident.age}}
<div ng-show="showAlias">{{resident.alias}}</div>
</li>
</ul>
And then in your controller implement a handler function for the button click:
myApp.controller("myCtrl", function($scope) {
$scope.showAlias = false;
$scope.residents = [
{fname:"Jekin", lname:"Rajal", age:29, alias:"Jek"},
{fname:"Jaydip", lname:"Vasoya", age:24, alias:"JD"},
{fname:"Melvin", lname:"Matthew", age:23, alias:"Anna"}]
$scope.fucn = function() {
$scope.showAlias = true;
};
});
I'm trying to change the background color of a Bootstrap UI popover by creating custom popover classes to override the existing ones (e.g. popover1, popover2, etc. instead of popover). I know that this works for vanilla Bootstrap popovers (here is the fiddle, but it doesn't seem to work for the Bootstrap UI popovers).
When I apply the same method to the Bootstrap UI popover, it just shows a tiny, blank popover. All I have done so far is change
<a class="btn btn-primary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>
to
<a class="btn btn-primary popover-container" popover-placement="right" popover-template="'partials/loglevel-template.html'" popover-trigger="click">Log level</a>
loglevel-template.html
<div class="popover1">
<div class="arrow"></div>
<div class="popover-content">
<p>some content</p>
</div>
</div>
When I remove the popover1 class it works, so there's no functional issues on just getting the popover to display.
I like using the Bootstrap UI popovers more because you don't have to use any of that hard-coding template tomfoolery in jQuery (in fact you don't have to write any jQuery at all). I just can't figure out how to change the background color of the Bootstrap UI popovers. Before I head down the rabbit-hole I wanted to know if anyone else has achieved this, or if there is an easy fix (perhaps Bootstrap UI popovers use a different set of classes than the vanilla popovers). If it's a matter of overriding some CSS classes, that would be the dream.
This is unfortunately not documented in the UI Bootstrap documentation, and I (also unfortunately) took several hours to find this extremely simple solution, but hopefully this will save some other folks some time. You can add a popover-class attribute to the element on which you place the uib-popover directive, then style the popover accordingly. See snippet below for details:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
.trigger-popover-button {
margin: 25% 0 0 10%;
}
.custom-dynamic-popover-class {
color: red;
}
.custom-dynamic-popover-class > .popover-inner > .popover-title {
background: yellow;
}
.custom-dynamic-popover-class > .popover-inner > .popover-content {
background: blue;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<button uib-popover-template="dynamicPopover.templateUrl"
popover-title="{{dynamicPopover.title}}"
popover-class="custom-dynamic-popover-class"
type="button"
class="btn btn-default trigger-popover-button">
Popover With Template
</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text"
ng-model="dynamicPopover.title"
class="form-control">
</div>
</script>
</div>
</body>
</html>
I have an angularjs app, where I am using ng-app on div, and not the html.
The application works fine in IE>=10 and chrome,FF.
In IE 9, none of the ng- code is executed, breakpoint doesn't enter my custom angular scripts, and html shows {{}}.
It seems like angularjs is not getting bootstrapped.
I tried manually bootstrapping using
$(document).ready(function () {
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
Doing this doesn't show the {{}} anymore, but no data is coming.
I am getting data using $http get like this
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});
Angularjs 1.3.2
_Layout.cshtml
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" >
<head>
<meta charset="utf-8" />
<title></title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--[if lte IE 9]>
<script src="xdomain.js" slave="http://example.org/proxy.html"></script>
<![endif]-->
#Scripts.Render("~/bundles/Angular")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Angular/css")
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$.ajaxSetup(
{
cache: false
});
$(document).ready(function () {
$(".openPopup").live("click", function (e) {
e.preventDefault();
$("#PopUp").addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this)
.attr("data-dialog-title"), close: function () {
//$(this).remove();
}, modal: true, height: 400, width: 900
}).load(this.href);
});
$(".close").live("click", function (e) {
$(this).closest(".dialog")
.dialog("close");
window.location.reload();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="~/Home/Index" class="navbar-logo">
<img src="#Url.Content("~/Images/xs.png")">
<span>BillPrep</span>
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle" data-target="#" href="#">
<strong>#Html.Action("LoginDisplay", "Home", new { Name = User.Identity.Name })</strong> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>User Settings</li>
<li>System Settings</li>
<li>#Html.ActionLink("Sign Out", "Logout", "Home")</li>
</ul>
</ul>
</div>
</div>
</nav>
<div>
#RenderSection("featured", required: false)
#RenderBody()
</div>
Homepage.cshtml
<script src="~/Scripts/angularjs/stacktrace.js"></script>
<script type="text/javascript">
$(document).ready(function () {
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
// angular.bootstrap(document.getElementById("tabgrid"));
});
});
</script>
<div>
<body ng-controller="ngGridController" id="HomeGrid">
<style>
#myTabs div li.active a {
background-color: lightsteelblue;
}
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
}
.bold {
color: black;
font-weight: bold;
}
</style>
<div ng-controller="TabsDemoCtrl" data-ng-init="init()" id="tabgrid">
<div id="UserID" ng-show="false">{{User}}</div>
<loading></loading>
<br />
<tabset ng-show="{{show1}}">
<tab id="Inbox" active="isFirstActive">
<tab-heading>
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
Inbox
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridViewInbox"></div>
</tab>
<tab id="pending" active="isSecondActive">
<tab-heading>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
show2
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridView2" ng-show={{show2}}></div>
</tab>
js file
var app = angular.module('ngGridApp', ['ngGrid', 'ui.bootstrap', 'logToServer'])
.directive('loading', function () {
return {
restrict: 'E',
replace: true,
template: '<div class="loading"><img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif" width="20" height="20" />LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
TabsDemoCtrl.$inject = ["$scope", "$window"];
angular.module('ngGridApp').controller('TabsDemoCtrl', TabsDemoCtrl);
function TabsDemoCtrl($scope, $window) { $scope.User = ""; }
ngGridController.$inject = ["$scope", "$http", "$interval"];
app.controller('ngGridController', ngGridController);
function ngGridController($scope, $http, $interval) {
$scope.callAtInterval = function () {
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});
Adding the solution, if it can help someone.
The issue was creation of multiple body tags, one in the master page (_Layout) and other in the main page. The ng-app was applied to the main page body tag.
Since the html was not formed properly, angularjs was not bootstrapping correctly.
Changing the body tag on main page to div, and applying ng-app to div made it work fine in IE 9
I am using angularstrap to create a popover using a template. I am using the attribute ng-attr-data-template to provide link to the template. I am changing the mentioned attribute value using a function which is called on click of a button.
But the change is not being reflected to the popover. Please suggest the possible solution for this problem.
Here is the link to Plunkr
Code is as follows
index.html
<!DOCTYPE html>
<html ng-app="klk">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<hr/>
<button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x"
ng-attr-data-template="{{link}}" data-auto-close="1" bs-popover >
{{link}}
</button>
<hr/>
<button class="btn btn-info" ng-click = "changeContent()">Change link</button>
</body>
</html>
app.js
var app = angular.module('klk', ['mgcrea.ngStrap']);
app.controller('mainCtrl', function($scope, $popover){
$scope.trackName = 'Click on the button and give us a name';
$scope.popov = function(el){
$popover(angular.element(el),
{
show: true,
placement: 'right',
template: 'link1.html',
animation: 'am-flip-x'
});
};
$scope.link = "link1.html";
$scope.change = true;
$scope.changeContent = function(){
$scope.change = !$scope.change;
if ($scope.change)
$scope.link = "link1.html";
else
$scope.link = "link2.html";
}
});
link1.html
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"><strong>Heading 1</strong></h3>
<div class="popover-content">
pop content 1
</div>
</div>
link2.html
<div class="popover" >
<div class="arrow"></div>
<h3 class="popover-title"><strong>Heading 2</strong></h3>
<div class="popover-content">
pop content 2
</div>
</div>
If you are interested in changing the content of the template dynamically, it can be accomplished by using the following way.
Here is an example of modified Index.html. Notice that there is a data-content and a data-title that bound to model properties.
<!DOCTYPE html>
<html ng-app="klk">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<hr/>
<button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x" data-title = "{{popover.title}}" data-content="{{popover.content}}" data-template="link3.html" data-auto-close="1" bs-popover >Click Me</button>
<hr/>
<button class="btn btn-info" ng-click = "changeContent()">Change link</button>
</body>
</html>
Here is the module and the controller, In this controller we have a model called popover with the properties title and content, this will be dynamic. For example, if you called the function changeContent it will toggle the content and make the content in popover change.
// Code goes here
var app = angular.module('klk', ['mgcrea.ngStrap']);
app.controller('mainCtrl', function($scope, $popover){
$scope.trackName = 'Click on the button and give us a name';
$scope.toggleContent=true;
$scope.popover = {
"title": "Original Content",
"content": "loading...",
};
$scope.changeContent=function(){
if($scope.toggleContent){
$scope.popover = {
"title": "Changed",
"content": "<p>hello the content has changed!</p>",
};
}else{
// show original content
$scope.popover = {
"title": "Original Content",
"content": "Hello Content 1...",
};
}
}
});
Here is a template that will have the content and the title that will be dynamic as it is bound to model properties title and content. Look for ng-bind-html
<div class="popover" tabindex="-1" ng-show="content">
<div class="arrow"></div>
<div class="popover-title" ng-bind-html="title"></div>
<div class="popover-content">
<form name="popoverForm">
<div class="form-actions">
<!--<button class="btn-sm pull-right close-popover" ng-click="$hide()">x</button>-->
</div>
<p ng-bind-html="content" style="min-width:300px;"></p>
</form>
</div>
</div>
A working example of this can be found here
http://plnkr.co/edit/FpqwcdcPNVI3zIzK6Ut1?p=preview