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;
};
});
Related
HTML file - directive template
<div class='class1'>
<span ng-show="Edit1">
<script type="text/ng-template" id="editdetails.html">
<div class="modal">
<h3>Update Unit Details</h3>
<input type='text' name='email' value=''>
</div>
</script>
</span>
</div>
<div class='class2'>
<span ng-show="Edit2">
Some content
</span>
</div>
Angular JS code
I am loading this into html file called directive template and then want to get only the ng-template content of editdetails.html how to do that?
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function () {
directiveTemplate = this.responseText;
};
var url1 = 'directivetemplate.html';
req.open('get', url1, false);
req.send();
$templateCache.put('template.html', directiveTemplate);
$edittemplate=directiveTemplate;
//The below code doesn't get me content inside the editdetails
$templateCache.put('editdetails.html',$edittemplate.filter('#editdetails.html').html());
Obviously you could read more about $templateCache and script documentation at Official AngularJS website. Other option is to try this one.
angular
.module("Example", [])
.controller("ExampleCtrl", ExampleCtrl);
ExampleCtrl.$inject = ['$scope', '$templateCache'];
function ExampleCtrl($scope, $templateCache) {
$scope.getContent = function() {
var script = document.getElementsByTagName("script");
var id = script[2].id;
var htmlContent = $templateCache.get(id);
document.getElementById("display").innerHTML = htmlContent;
};
}
/* Styles go here */
.content {
background-color: green;
color: white;
padding: 10px;
}
.button {
width: 150px;
padding: 10px;
background-color: red;
color: white;
border: 0px white solid;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="Example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<script type="text/ng-template" id="templateId.html">
<p class="content">This is the content of the template</p>
</script>
<p>
<input type="button" class="button" ng-click="getContent()" value="Get Template's Content">
</p>
<div id="display"></div>
</body>
</html>
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
This is not working working<div id = "number_1" class="number" ng-click="selected='1'" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}"><div class="number-text">1</div></div>but if I apply ng-class with child div it works fine.
Works for me. Can you check this
var demo = angular.module('demo', []);
demo.controller('DemoCtrl', function($scope) {
$scope.firstnumber = 1;
});
.active {
color: green;
}
.firstactive {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="DemoCtrl">
<div id="number_1" class="number" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}" ng-click="selected='1'">
<div class="number-text">1</div>
</div>
</div>
</body>
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