I wonder why my md-datepicker is not showing up. I have this html code in the partial html.
<div ng-if="question.QuestionTypeId == 4" class="row text-left options" style="">
<md-datepicker ng-model="foo" md-placeholder="Enter date" ng-change="Test(question)"></md-datepicker>
</div>
I have the following libs references
<script src="~/App/Apps/fnncialQsApp.js"></script>
<script src="~/App/Services/userDataRepo.js"></script>
<script src="~/App/Controllers/fnncialQsCtrl.js"></script>
<script src="~/Scripts/angular/angular-messages.min.js"></script>
<script src="~/Scripts/angular/angular-animate.min.js"></script>
<script src="~/Scripts/angular/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<div ng-app="userFinancialData" class="container">
<div ng-view></div>
</div>
As the image shown. Only a small hidden square element was displayed.
You need to add 'ngMaterial' while you initiate the angular module. Given the all other dependent java script files are imported into file, using CDN link or local copy.
Code would look like :
angular.module("CustomerManagement", ['ngMaterial']);
Related
I have created the website using angularjs and i have used angular-material in our website but i have properly included the script file properly but i got error after inlcude the ['ngMaterial'] as a depedency in our module i dont understand what the wrong in my code.
var app = angular.module("gupaApp", ['ngMaterial']);
app.controller("gupaContr", function($scope) {
console.log('hii');
})
<html ng-app="gupaApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
<script type="text/javascript" src="app/controller/gupaController.js"></script>
<body ng-controller="gupaContr">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<div flex="50">
<h3 class="title"><span>My Title</span></h3>
</div>
<div flex="50" layout layout-align="end center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
</div>
</div>
</md-toolbar>
</body>
</html>
You need to add references to the angular-animate.js and angular-aria.js aswell
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
Make sure to match the version you're using
PLUNKER DEMO
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'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>
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.
I can't see the star rating input anywhere. Isn't it loaded? Am I using the directive wrong? Please help.
I have included the ui.bootstrao, JQuery, Bootstrapm and thought the directive should work right out of the box.
When I try to specify ui.bootstrap when defining the ng-app the ng-resource stop working.
var app = angular.module('mainApp', ['ngResource','ui.bootstrap']);
test.html:
<!doctype html>
<html data-ng-app="mainApp">
<head>
<title>Test app/title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
</head>
<body role="document">
<div class="container">
<div class="page-header">
<h1>Test</h1>
</div>
<div ng-controller="PostIndexCtrl">
<div class="row">
<rating value="rate" max="5"></rating>
<div ng-repeat="item in items">
<div class="col-xs-1 col-md-3">
{{item.name}} <img class="thumbnail" src="{{item.photo}}" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="js/services.js"></script>
</body>
</html>
service.js:
var app = angular.module('mainApp', ['ngResource']);
app.factory("Post", function($resource) {
return $resource("/api/item");
});
app.controller("PostIndexCtrl", function($scope, Post) {
Post.get(function(data) {
// alert(data.items);
$scope.items = data.items;
});
});
This line in your html seems off to me:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
Use:
angular-bootstrap/ui-bootstrap-tpls.js
or
angular-bootstrap/ui-bootstrap-tpls.min.js
instead of simply using:
angular-bootstrap/ui-bootstrap.js
which doesn't contain the templates.
If using bower, then install with:
bower install angular-bootstrap
Depending on your setup (and possibly .bowerrc file) the angular-bootstrap directory will, by default, be put in the directory:
bower_components/angular-bootstrap/ (or perhaps simply components/angular-bootstrap in your config)
where you can find the files mentioned above.