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.
Related
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 have a ng-repeat that is displaying a list of items. I want them to be a col width of 2
This is the index.html body
index.html
<!DOCTYPE html>
<html ng-app="games">
<head>
<title>Games</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/fontello.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app/app.js"></script>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body ng-controller="gamesCtrl">
<a ui-sref="games">Games</a>
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
</html>
And here is the HTML I am pulling for the ui-view
list.html
<div ng-repeat="game in games">
<div ng-class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
What's happening though is its just stacking everything on top of each another and not putting it next to each other.
Here is the inspect element code
<div class="row">
<!-- uiView: -->
<div ui-view="" class="ng-scope">
<!-- ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40071/100/40071.png">
</div>
<!-- end ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope: Time Travel</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40072/100/40072.png">
</div>
</div>
Just incase something else is wrong here is the js
angular.module('games', ['ui.router', 'ui.bootstrap'])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//take out #
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
// Now set up the states
$stateProvider
.state('games', {
url: "/",
templateUrl: "/static/app/list.html",
controller: 'gamesCtrl'
})
})
.controller('gamesCtrl', ['$scope', '$state', 'gamesFactory',
function($scope, $state, gamesFactory) {
$scope.$state = $state;
$scope.games = null;
function init() {
gamesFactory.getGames().success(function(games) {
$scope.games = games.data;
console.log($scope.games.data)
});
}
init();
}
])
.factory('gamesFactory', function($http) {
var factory = {};
factory.getGames = function() {
return $http.get('/games.json');
};
return factory;
});
ng-class is expecting an Angular expression. In this case, you are giving it the actual CSS class name. Angular tries to evaluate that as an expression, which results in undefined (or null or the empty string).
Since you don't need to do anything but apply the class name here, just use the regular class attribute instead of ng-class:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
ng-class expects an expression. Change your markup like this:
<div ng-repeat="game in games">
<div ng-class="'col-xs-2'">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngClass
The problem is that you're repeating the div around the columns, not the columns themselves. Try this:
<div class="col-xs-2" ng-repeat="game in games">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
Try using ng-src on your image. At the time the page is first rendered, the image size probably can't be determined.
Edit, so the complete html should be:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src= "" ng-src="{{game.thumbnailUrl100}}"/>
</div>
As others have pointed out, you shouldn't be using ng-class here.
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>
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.