I want to show a pop up with values from docDetails on hover of on of the item.
looking at something like
<div ng-repeat="row in docDetails">
<div ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" class="col-sm-2">
{{row.DocumentTypeName}}
<span class="??" style="white-space: normal;" ng-show="hoverEdit">
{{row.DocumentUploadedBy}}
</span>
hoverEdit set to true/false in hoverIn() and hoverOut() method.
I am looking at two things
On hover , i want to show a mouse hand, and display a small pop up with content {{row.DocumentUploadedBy}}
Anything from bootstrap i can readily use? Open to all suggestions.
Thanks
Here is something you can try [Plunker][1]
Please use the link mentioned below
http://plnkr.co/edit/J050zPX5rhLmS2HVBAGy Plunker
or in other terms use something like this mentioned below
script-
var app = angular.module("app",[]);
app.controller('main',["$scope",function($scope){
$scope.docDetails = [
{DocumentTypeName:"Type-1",DocumentUploadedBy:"User-1",ShowInfo:false},
{DocumentTypeName:"Type-2",DocumentUploadedBy:"User-2",ShowInfo:false},
{DocumentTypeName:"Type-3",DocumentUploadedBy:"User-3",ShowInfo:false},
{DocumentTypeName:"Type-4",DocumentUploadedBy:"User-4",ShowInfo:false}
];
}]);
and the HTML as
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div ng-controller="main">
<div style="border:1px solid black; height:200px;">
{{hoverEdit}}
<div ng-repeat="row in docDetails">
<div style="border:1px solid red; width:200px; height:20px;" ng-mouseover="row.ShowInfo=true" ng-model="hoverEdit" ng-mouseleave="row.ShowInfo=false">
{{row.DocumentTypeName}}
<span style="white-space: normal;" ng-show="row.ShowInfo" > {{row.DocumentUploadedBy}} </span> </div>
</div>
</div>
</div>
</body>
</html>
Related
this result of the fetch.php that contain on the data from mysql database page
[{"id":"1","name":"Moblie phone","price":"3000","image":"mobil1","desc":"samasong mobile garand prime 2+"},{"id":"2","name":"Watch","price":"200","image":"watch","desc":"modern watch its color is gold"},{"id":"3","name":"Labtop","price":"4000","image":"labtop","desc":"hp labtop core i5 space 500gb "},{"id":"4","name":"moble lite","price":"1999","image":"mobil2","desc":"moble lite sterrr"}]
this html code
<!DOCTYPE html>
<html>
<head>
<title>shoping cart</title>
<link rel="stylesheet" type="text/css" href="functions/bootstrap.css">
<script type="text/javascript" src="functions/jquery.js"></script>
<script type="text/javascript" src="functions/bootstrap.min.js"></script>
<script type="text/javascript" src="functions/angular.min.js"></script>
</head>
<body>
<h2 align="center">Shopping cart application by angularjs and php</h2>
<div class="container" ng-app="shoppingcart" ng-controller="shoppingcartcontroller">
<div class="row " >
<div class="box col-md-3" style="margin-top: 20px"
ng-repeat="p in products">
{{p.name}}
{{p.price}}
</div>
</div>
</div>
this angularjs code
<script >
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
};
});
</script>
Why do you need this loadproduct function?
Please only this in your controller:
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
In addition, take in consideration to check whether you need to define '$scope.products' as an empty array outside the scope of your get request.
I want to put some images into my background div.
I expected those 5 image files will be in the div with ".well" class, but they just were spread out of that div. So, here's my question.
How can I put those image files stably into .well div?
There's my code and result below:
<!doctype html>
<html ng-app="exampleApp">
<head>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet"></link>
<link href="bootstrap-theme.css" rel="stylesheet"></link>
<script>
angular.module("exampleApp", [])
.controller("exampleCtrl", function($scope){
$scope.data = [
{ movie:"Pandora", date:"2016-12-07", img:"pandora.gif" },
{ movie:"Lalaland", date:"2016-12-07", img:"lalaland.gif" },
{ movie:"Willyoubethere", date:"2016-12-14", img:"willYouBeThere.gif" },
{ movie:"brother", date:"2016-11-23", img:"brother.gif" },
{ movie:"Animal", date:"2016-11-16", img:"fantasticAnimalDictionary.gif" }
];
});
</script>
</head>
<body ng-controller="exampleCtrl">
<div class="container">
<div class="well">
<div class="col-md-2" ng-repeat="data in data">
<img ng-src={{data.img}} />
</div>
</div>
</div>
</body>
</html>
The result from my code
Add row class with well. like this
<div class="well row">
<div class="col-md-2" ng-repeat="data in data">
<img ng-src={{data.img}} />
</div>
</div>
row class are containers of columns.The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
I am training with html and angular, and I want to create a memory game.
I have an array of 16(8*2) images, and I am looking for an easy way to display those images in a table structure.
var app = angular.module('memoryGame', []);
app.controller('gameCtrl', function ($scope) {
$scope.gary = "images/Gary.png";
$scope.larry = "images/Larry.png";
$scope.mrkrabs = "images/MrKrabs.jpg";
$scope.patrick = "images/Patrick.png";
$scope.plankton = "images/Plankton.JPG";
$scope.sandy = "images/Sandy.jpeg";
$scope.spongebob = "images/Spongebob.png";
$scope.squidward = "images/Squidward.jpg";
$scope.cards = [$scope.gary, $scope.larry, $scope.mrkrabs,
$scope.patrick, $scope.plankton, $scope.sandy,
$scope.spongebob, $scope.squidward];
Array.prototype.push.apply($scope.cards, $scope.cards);
How can I use ng-repeat and ng-table to display this array in 4*4 matrix?
(I will sort out later how to suffle the array :) )
I would suggesting using ng-repeat and bootstrap grid structure instead of ng-table. It's not really a table with rows and columns so the grid structure makes more sense to me.
<div class="row">
<div class="col-md-3" ng-repeat="card in cards">
<!--image here using card-->
</div>
</div>
Thanks to Austin, I have ended up with this solution:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="angular.min.js"></script>
<script src="game_controller.js"></script>
<style>
img {
height: 100px;
width: 100px;
}
</style>
</head>
<body ng-app="memoryGame" ng-controller="gameCtrl">
<div class="row">
<h1 align="center">Memory Game</h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="col-md-3" style="margin-top: 30px;" ng-repeat="card in cards track by $index">
<img ng-src="{{ card }}" alt="Description" />
</div>
</div>
<div class="col-md-3"></div>
</body>
</html>
Since I am really new to web development, if anyone find something I could do better I will be glad to here.
Hi I am trying to implement facebook kind of post and reply comments using angularjs. Below is my code
<doctype html>
<html>
<head>
<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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="HomeCtrl">
<div class="container" style="margin-top:1%;">
<div class="row">
<textarea style="width:500px" ng-model="txt" placeholder="Add a comment..."></textarea></br></br>
<button type="button" class="btn btn-default" ng-click="postData(txt)" ng-model="btn">post</button>
</div>
</div>
<div class="container" style="margin-top:1%;">
<div class="row">
<div ng-show="comment" ng-repeat="data in datas track by $index">
{{data}}
<div>
Like
comment
share
</div>
<div ng-show="innerComment">
<textarea style="width:500px; height:30px;" ng-model="txt1"></textarea></br></br>
<button type="button" class="btn btn-default" ng-click="postReplied(txt1)" ng-model="btn" ng-show="postRepBtn">Reply</button>
<div ng-show="innercmt" ng-repeat="data1 in InnerData">
{{data1}}
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.comment=false;
$scope.innerComment=false;
$scope.datas=[];
$scope.InnerData=[];
$scope.innercmt=false;
$scope.postRepBtn=true;
$scope.postData=function(txt)
{
$scope.comment=true;
$scope.datas.push(txt);
$scope.txt='';
}
$scope.showInnerComment=function($index)
{
console.log($index)
$scope.innerComment=true;
}
$scope.postReplied=function(txt1)
{
$scope.InnerData.push(txt1);
$scope.innercmt=true;
//$scope.postRepBtn=false;
$scope.txt1='';
}
}]);
</script>
</body>
</html>
Now the problem I am facing is that (assuming I have posted 3 comments), I am not able to open reply(textarea) for that particular comment(link), Instead its opening the textarea(reply) for all the comments when clicking on any comment link.
I am not able to solve this issue.Or is there any other way to solve it?? Any help is appreciated.
Thanks
I am attching the images also
Make $scope.innerComment an array of Booleans.
$scope.innerComment = [];
Now modify it in your view as ng-show="innerComment[$index]"
This way you can set the value true for particular comment.
$scope.showInnerComment=function($index)
{
console.log($index)
$scope.innerComment[$index]=true;
}
Note: Whenever you add comment , push false in innerComment.
I am new to Angularjs- so have little bit of issue with understanding why my code is not working. Here is my problem:
I have 2 json data which I put in 2 factories- one listing animals and other fruits
I have 2 controllers for each factory. All I need is to pull data from these 2 factories and load the name into 2 set of buttons - Animals and Fruits
Display images on clicking these buttons.
I am having trouble is displaying both buttons in a single page. It works only one at a time i.e. either display animals or fruits- but not both.
Can anybody help me with this issue? This is my plnkr of the app.
P.S. Plunker has issue once a while with error message: Unable to
connect to any application instances. But app worked in plkr as well as locally
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="app.js"></script>
<script src="animalservices.js"></script>
<script src="fruitservices.js"></script>
<script src="animalController.js"></script>
<script src="fruitController.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Animals and Fruits</h1>
<div class="vertical-container" class="panel panel-default">
<div class="panel-body">
<div class="row">
<div ng-controller="animalController">
<div class="col-sm-7" id="img_container"><img src="{{thisanimalData.image || 'https://clcrlsconference.files.wordpress.com/2014/06/welcome.jpg'}}" id="animalImage" class="img-responsive" width="500" >
</div>
<div class="col-sm-5">
<h3>Animals</h3>
<button id="animalbutton" class="btn btn-link vleft" ng-repeat="checkanimal in animalData" data="{{checkanimal.name}}" ng-click="clickEvent($event)">{{checkanimal.name}}</button>
</div>
</div>
<div class="col-sm-7"ng-controller="fruitController">
<button id="fruitbutton" class="btn btn-link vleft" ng-repeat="checkfruit in fruitData" data="{{checkfruit.fruit}}" ng-click="clickEvent($event)">{{checkfruit.fruit}}</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{{checkfruit.fruit}} should be {{checkfruit.name}}
fruit is not a property on an object inside the fruitData array.