My code.
<md-datepicker ng-model="csv.date" md-placeholder="Search Date"></md-datepicker>
The icon will not appear, but something is there when I inspect the dom. Thoughts?
Check the following code and take what all you need. Thank you.
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style>
.datepickerdemo md-content {
padding-bottom: 200px;
}
.datepickerdemo {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px;
}
</style>
<script>
angular
.module('firstApplication', ['ngMaterial'])
</script>
</head>
<body ng-app="firstApplication">
<h4>Choose the date</h4>
<div class="datepickerdemo" layout="column" ng-cloak>
<md-content>
<md-datepicker ng-model="csv.date" md-placeholder="Select Date"></md-datepicker>
</md-content>
</div>
</body>
</html>
Related
i am trying to implement searching concept using filter Filter, I'm getting this error and I'm unable to sort this error even I've gone through so many articles and solutions, none suites best for this ... please help !!!!
here is the code.....>
<!doctype html>
<html>
<head>
<style>
#span1{
border:2px dashed blue;
background-color:lime;
padding:0px;
margin-left:5px;
}
hr{
padding:0px;
margin:0px;
background-color:red;
height:5px;
}
h1{
border:2px solid lime;
background-color:orange;;
color:yellow;
padding:0px;
margin:0px;
position:relative;
width:100%;
float:left;
}
h1:first-line
{
color:green
}
</style>
</head>
<body ng-app="myApp" >
<h1><span id="span1">5-11-2016</span> ... Angular JS Filters implemented in Searching.</h1><br><br>
<hr>
<div ng-controller="myAppController">
Student Name : <input ng-model="searchobj.sname"/>
<br>
Select course : <select ng-model="searchobj.course">
<option>angular js</option>
<option>html</option>
<option>css</option>
<option>java script</option>
<option>jQuery</option>
<option>Bootstrap</option>
</select>
<br>
<br>
<br>
<table border="2">
<tr>
<th>Student Name</th>
<th>Course</th>
</tr>
<tr ng-repeat="item in students | filter : searchobj">
<td>{{item.sname}}</td>
<td>{{item.course}}</td>
</tr>
</table>
</div>
<script scr="angular.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myAppController",
function($scope){
$scope.searchobj={sname:" ",course:" "};
$scope.students=[
{sname:"scott",course:"html"},
{sname:"rock",course:"css"},
{sname:"umar",course:"jQuery"},
{sname:"asad",course:"angular js"},
{sname:"nayeem",course:"html"},
{sname:"onida",course:"html"},
{sname:"shakes",course:"java script"},
{sname:"rony",course:"html"},
{sname:"rock",course:"Html"},
{sname:"asif",course:"css"},
{sname:"onida",course:"java script"},
{sname:"sammy",course:"Html"},
{sname:"huber",course:"angular js"},
{sname:"watson",course:"Html"},
{sname:"azzy",course:"Html"},
{sname:"katy",course:"bootstrap"},
{sname:"randy",course:"css"},
{sname:"sammy",course:"html"},
{sname:"jaab",course:"angular js"},
{sname:"randy",course:"html"},
{sname:"peter",course:"css"}];
});
</script>
</body>
</html>
Change <script scr="angular.js"></script> to <script src="angular.js"></script>
Change========^ -----------------------------------------------------^
<html>
<head>
<script src="angular.js"></script>
i am trying demo on my local machine angular material nav bar
but my browser shows blank page. i also checked console but no errors also checked all files are loaded correctly .so what is missing here ???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="angular-material/angular-material.css">
<style type="text/css">.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }</style>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`
</div>
</md-content>
</div>
<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script>
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
</script>
</body>
</html>
You have nowhere declared the module in the view,
<body ng-app="navBarDemoBasicUsage">
I tried adding angular-carousel in my application and I am getting this error
Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355
I got this error only after adding ngMaterial in my application with carousel. I am using latest stable version 1.5.8 of angularjs. This is my code I tried until now,
<!DOCTYPE html>
<html ng-app="DemoApp">
<head>
<meta charset="UTF-8">
<title>angular-carousel demo</title>
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/angular-material.min.css">
<link href='css/angular-carousel.min.css' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="DemoCtrl">
<style type="text/css">
.selected
{
background-color: red;
}
.demo
{
height: 500px;
width: 100%;
}
.carousel5
{
height: 500px !important;
width: 100% !important;
}
</style>
<div class="demo" >
<ul rn-carousel rn-carousel-index="carouselIndex6" rn-carousel-deep-watch rn-carousel-buffered class="carousel5">
<li><div style="height:500px;width:100%;background-color:blue;"></div></li>
<li><div style="height:500px;width:100%;background-color:cyan;"></div></li>
<li><div style="height:500px;width:100%;background-color:grey;"></div></li>
<li><div style="height:500px;width:100%;background-color:yellow;"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-touch.js"></script>
<script src="js/angular-carousel.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script>
angular.module('DemoApp', [
'ngMaterial','angular-carousel'
]).controller('DemoCtrl', function($scope) {});
</script>
</html>
Am I wrong by someway?. Can someone please help me?
First Include All Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
Than include Angular Material JS file
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
Looks like to don't include the ngMaterial js files
This is my HTML code :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/jsonCntrl.js"></script>
</head>
<body ng-controller="myCntrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Items List</h1>
</ion-header-bar>
<ion-content>
<ion-list >
<ion-item ng-repeat="item in myData">
{{ item.Name }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
This is my Controller Code :
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
$scope.myData = response.data.records;
});
});
I am not getting a list view instead something like this
List response Link
But when i use the same code to populate data from an array its working fine.
Try this:
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http
.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.myData = angular.fromJson(response.data.records);
});
});
Use the same code you have and check the styles of .item class in ionic.css file with the line of 5646 else override that class with below style
border-color: #ddd;
background-color: #fff;
color: #444;
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 16px;
border-width: 1px;
border-style: solid;
font-size: 16px;
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="../stylesheets/general.css" type="text/css" />
<style type="text/css">
.dragndrop {
position:relative;
margin:30px auto;
border:4px dashed #000;
border-radius: 25px;
padding:50px;
text-align: center;
}
table{
width:100%;
}
tr{
width:100%;
}
td, th {
padding:10px;
border:1px solid #000;
width:50%;
text-align: center;
}
</style>
</head>
<body>
<section class="container">
<!--<form action="/file-upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>-->
<form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form>
<section id="skills">
</section>
<script type="text/template" id="skillsTemplate">
<section>
<table>
<tr>
<th>Skill</th>
<th>Value</th>
</tr>
<% _.each(items, function(item){ %>
<tr>
<td><%= item.get('name') %></td>
<td><%= item.get('value') %></td>
</tr>
<% }); %>
<tr>
<td><button id="newSkill">New</button></td>
</tr>
</table>
</section>
</script>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<script type="text/javascript">
SkillsView = Backbone.View.extend({
render : function(){
var template = _.template($('#skillsTemplate').html(), [{ name:"Linux", value:"Test"}]);
this.$el.html(template);
}
});
var skillsview = new SkillsView({el : $('#skills') });
skillsview.render();
</script>
<!-- My Javscript -->
</body>
</html>
The only important part is the underscore template is not working. It is saying that the '_' on the line: _.each(items, function(item) is undefined. Why is this happening? I tried moving the underscore script include to the top of the page and that didn't help.
I was unable to reproduce the "_ is not defined" issue, but I did find another issue that you may be running into: You're referencing the items as the variable items, but you never told _.template you want the data to be in items. Use an object literal as the data:
_.template($('#skillsTemplate').html(), {
items: [{ name:"Linux", value:"Test" }]
})
(Also, you're using item.get('name') when the data is a plain object rather than an Underscore model, but I assume that was just a remnant from your original code after you simplified your code for the question.)