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.
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've installed package angular-grid-enterprise via bower. Version of angular grid is 6.2.1. I'm using angular framework in laravel project. This is content of default.blade.php, where are stored all necessery scripts.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script scr="http://demos.angularcode.com/grid/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<script src="/js/dashboard/new.controller.js"></script>
<script src="/bower_components/ag-grid-enterprise/dist/ag-grid-enterprise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/6.2.1/ag-grid.min.js"></script>
And here is my controller
var kongres = angular.module('kongres', ["agGrid"]);
kongres.controller('NoviController', NoviController);
function NoviController($scope, $http, $timeout) {}
And here is page in witch grid should be displayed
#extends(isset($layout)?$layout:'layout.default')
#section('content')
<div class="page-content-wrapper" ng-controller="NoviController">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<div class="row">
<div class="col-lg-12 portlet light bordered">
<div class="portlet-title">
<div class="caption font-dark">
<i class="icon-people"></i>
<span class="caption-subject bold uppercase">Hotel bookings</span>
</div>
</div>
<div class="portlet-body">
#{{ title }}
<div ag-grid="gridOptions" style="height: 600px;" class="ag-blue"></div>
</div>
</div>
</div>
<!-- /.row -->
</div>
</div>
<!-- /.container-fluid -->
#stop
When I try to load page this error shows angular.js:38Uncaught Error: [$injector:modulerr]. My question is how to inject this module properlly?
You have to load the <script src="/js/dashboard/new.controller.js"></script> after loading the ag-grid-enterprise.js references
Reorder them like below,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script scr="http://demos.angularcode.com/grid/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<script src="/bower_components/ag-grid-enterprise/dist/ag-grid-enterprise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/6.2.1/ag-grid.min.js"></script>
<script src="/js/dashboard/new.controller.js"></script>
DEMO
Also you have to call this before declaring the module,
agGrid.initialiseAgGridWithAngular1(angular);
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'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.
Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).
As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?
for posterity, the equivalent html file from the fiddle would be:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
and the equivalent .js would be:
var my_app = angular.module('my_app', ['ui.bootstrap']);
my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Thanks!
Angulajs UI Bootstrap 0.13.0 need ngAnimate module for animation. Register ngAnimate it will work. issue
Original plnkr
Modified, animation working plnkr
Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
The JS can stay the same. I just modified the ui-bootstrap version in the html code.
Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/
Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.
There seems to be a version limit up until where this stops to animate.
Here is a Fiddle to see it working as you want it to, but with the newest versions it will only work with.
<html !DOCTYPE html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="my_app">
<br>
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed" >
<div class="well well-lg">Some content</div>
</div>
</div>
<script src="http://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script>
<script>
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']);
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
</script>
</body>
</html>