When I click on the image or text I want to hide this current div and show another div which also use ng-repeat
this code html to show primary image with text :
<div class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" />
<div>{{sign.texte}}</div>
</div>
For example I have 4 image with text (number, alphat, ...)
click in text number => show this div that contains this and hide the other
<div class = "img-container" ng-repeat = "sign in signs.number">
<Img class = "animated" ng-src = "{{sign.animated_src}}" width = "200" height = "150"/>
<div> {{sign.texte}} </ div>
</div>
click in alphat => show this div that contains this and hide the other
<div class = "img-container" ng-repeat = "sign in signs.alphat">
<Img class = "animated" ng-src = "{{sign.animated_src}}" width = "200" height = "150"/>
<div> {{sign.texte}} </ div>
</div>
I hope I understand right..
HTML
<div class="img-container" ng-repeat="sign in signs.list">
<img class="animated" ng-src="{{sign.animated_src}}"
width="200" height="150"
ng-click="filterList(sign.texte)" />
<div ng-click="filterList(sign.texte)">{{sign.texte}}</div>
</div>
JS
$scope.filterList = function(char){
if(typeof char === typeof 0){
$scope.signs.list = $scope.signs.number;
}
else{
$scope.signs.list = $scope.signs.alpha;
}
};
$scope.signs = {
list: ["A", 1, "B", 2, "C", 3],
number: [1, 2, 3],
alpha: ["A", "B", "C"]
};
Working fiddle ==> https://jsfiddle.net/k19g6vsb/
use the ng-show and ng-hide directives
<div ng-hide="showItem" class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
<div ng-show="showItem" class="img-container" ng-repeat="sign in signs.List">
<img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
</div>
<div ng-init="showThis = true" ng-click="showItem = !showItem"> {{sign.texte}}</div>
Here is the code sample please check
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.toggle = true;
$scope.toggleFilter = function() {
this.toggle = !this.toggle
}
/**** Ignore This ***/
var testDATA = {
name : "name",
name2: "name2"
}
var list = [];
for(var i=0;i<10;i++){
testDATA.name = angular.copy("name"+i);
list.push(testDATA);
}
console.log("test",list);
$scope.list = list;
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<p ng-repeat="obj in list track by $index">
<span ng-hide="toggle">{{obj.name}}</span>
<span ng-show="toggle">{{obj.name2}}</span>
<span>
<input type="button" value="toggle" ng-click="toggleFilter();">
</span>
</p>
</div>
</body>
</html>
Here is the plunker for this :PLUNKER
Try this:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Angular Ajax with PHP</title>
</head>
<body>
<h2>The form</h2>
<div ng-app="myApp" ng-controller="mainController">
<div class="img-container" ng-repeat="sign in signs.List">
<div ng-show="show == $index">
<img class="animated" ng-src="{{sign.src}}" ng-click="increment()" width="200" height="150" />
<div>{{sign.text}}</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('mainController',function($scope){
$scope.show = 0;
$scope.signs = {};
$scope.signs.List = [];
$scope.signs.List.push({src:"img1.jpg",text:"Text 1"});
$scope.signs.List.push({src:"img2.jpg",text:"Text 2"});
$scope.increment = function() {
$scope.show = $scope.show + 1;
if ($scope.show >= $scope.signs.List.length) {
$scope.show = 0;
}
}
});
</script>
</body>
</html>
Related
I am working on a stock application using Spring Boot. I have stock data from external API which looks like this:
{{stock.dates}} = [2017-05-04, 2017-05-03, 2017-05-02, 2017-05-01,
2017-04-28, 2017-04-27, 2017-04-26, 2017-04-25, 2017-04-24, 2017-04-21]
{{stock.stockValues}} = [150.85, 151.8, 152.78, 152.46, 150.25, 147.7,
146.56, 146.49, 145.47, 143.68]
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Stock app</title>
<script>
<!-- Many scripts here-->
</script>
</head>
<body ng-app="App">
<navbar-menu></navbar-menu>
<div class="container" ng-view></div>
</body>
</html>
My stock.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
<!-- Many scripts here-->
</script>
</head>
<body>
<div id="spinner" class="spinner" ng-show="loading">
<img src="https://www.yugma.com/images/loading-animation-7.gif" />
</div>
<!-- Page Content -->
<div class="container" ng-show="content">
<div class="panel">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Stock symbol:</h5>
</div>
<div class="col-md-1">{{stock.symbol}}</div>
<div class="col-md-9"></div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Last refreshed:</h5>
</div>
<div class="col-md-3">{{stock.lastRefreshed}}</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Last price:</h5>
</div>
<div class="col-md-3">{{stock.stockValues[0]}}</div>
<div class="col-md-8"></div>
</div>
</div>
</div>
</div>
My controller.js:
(function(angular) {
'use strict';
var App = angular.module('App');
App.controller('StockController', [ '$scope', '$http', '$routeParams',
'$rootScope', function($scope, $http, $routeParams, $rootScope) {
$scope.init = function() {
if ($rootScope.stockID !== undefined) {
$scope.getStockData($rootScope.stockID);
return;
} else if ($routeParams.stockID !== undefined) {
$rootScope.stockID = $routeParams.stockID;
} else {
$rootScope.stockID = 'FB';
}
$scope.getStockData($rootScope.stockID);
};
$scope.getStockData = function(stockID) {
$scope.loading = true;
$scope.content = false;
$http.get('/stock', {
params : {
stockID : encodeURI(stockID)
}
}).then(function(response) {
$scope.showError = false;
$scope.stock = response.data;
$scope.stockAvailable = true;
}, function(response) {
$scope.showError = true;
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
$scope.content = true;
});
};
$scope.init();
} ]);
})(window.angular);
Now what I need to do is to create a Google Chart using this data (dates vs stock values)
How can I do it?
Also, when I tried to draw a static example chart from Google Charts Tutorial I could only do it in my index.html, when I put the same definition in stock.html, the chart didn't work, do you have any idea why?
I've got
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem,newComment)"></textarea>
</div>
</div>
</div>
and in the comment function i've got
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = '';
} // just adding text from textarea to the list
so i'm wondering why the value of textarea does not go to empty value
http://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz its working.
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="navbar-collapse">
<div class="row">
<div class="col-lg-2 img-fake"></div>
<div class="col-lg-10 native-item ">
{{newComment}}
<textarea class="form-control" rows="5" id="comment" ng-model="newComment" ng-keyup="$event.keyCode == 13 && comment(existingItem, newComment)"></textarea>
</div>
</div>
</div>
</body>
</html>
In youe case it is not working because, you may not define comment property of existingItem
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.newComment = 'asdf';
$scope.existingItem = {};
$scope.existingItem.comments = [];
$scope.comment = function(existingItem, newComment){
existingItem.comments.push(newComment);
console.log(existingItem.comments);
$scope.newComment = '';
}
});
i had same issue and fixed like this
$scope.comment = function(existingItem,newComment){
existingItem.comments.push(newComment);
$scope.newComment = 'xx'; // add a random data
$scope.$evalAsync(function() { $scope.newComment = '' ; }); //or use $timeout(function() { $scope.newComment = '' ; });
}
I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap#0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">
{{ (row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'jobId' },
{ name: 'status', cellTemplate: 'statusTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
Any explanation is very appreciated
Update
This works on Firefox, Safari and Chrome
One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer.
Also, you should use ng-style instead of style only.
Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">
{{(row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" ng-style="{'width': ((row.entity.error/row.entity.loaded)*100) + '%' }">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
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
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)