I'm trying to create an autocomplete feature but I can't display the results as I want, I think it's a z-index issue, but I couldn't solve it.
I can use md-autocomplete, it doesn't have this problem, but I want to learn what's causing this.
As soon as I start typing, my input goes up and results are displayed below in the navigation bar.
I changed $http to an array to mock the results.
Here's my code:
<html lang="en">
<head>
<style>
#testing > div > div > div > md-input-container {
margin:0;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<md-content>
<md-toolbar id="testing">
<div layout-wrap layout="row">
<div ng-controller="SearchCtrl" class="md-toolbar-tools">
<div flex="40" layout-align="center">
<md-input-container class="" flex="" layout="row">
<label class="search-color">Search</label>
<input ng-model="searchInput" class="text1" type="text">
</md-input-container>
<md-item-template flex="100" layout="column">
<div ng-repeat="a in details">
<div>{{a}}</div>
</div>
</md-item-template>
</div>
</div>
</div>
</md-toolbar>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
angular.module('BlankApp').controller('SearchCtrl', ["$scope", "$http",
function($scope, $http) {
//$scope.searchInput = "";
$scope.$watch('searchInput', function() {
if ($scope.searchInput) {
fetch();
}
});
function fetch() {
var arr = ["result1", "result2", "result3", "result4"];
$scope.details = arr;
}
}]);
</script>
</body>
</html>
Here's my plunk : http://plnkr.co/edit/LQ1HxV6vmPkUGYHnVfCg?p=preview
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 am planning to use AngularJS 1.x version with Angular Material design.
While I was searching for articles I came up with below two URL. First one is what I am using for Angular 1.x. If I am not wrong then the second one is for Angular 2.x and higher version. Hope someone can put more light on this.
https://material.angularjs.org
https://material.angular.io
Yes you are right! In order to setup your app with angularjs use the first one
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.todos = [];
for (var i = 0; i < 45; i++) {
$scope.todos.push({
face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60',
what: "Brunch this weekend?",
who: "Markus Thiel",
notes: "I'll be in your neighborhood doing errands."
});
}
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl" layout="column">
<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>
<md-content layout-fill>
<md-list>
<md-item ng-repeat="item in todos">
<md-item-content>
<div class="md-tile-left">
<img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
</div>
<div class="md-tile-content">
<h3>{{item.what}}</h3>
<h4>{{item.who}}</h4>
<p>{{item.notes}}</p>
</div>
</md-item-content>
<md-divider inset></md-divider>
</md-item>
</md-list>
</md-content>
</body>
</html>
While the 2nd url is for angular and angular4 you can install the necessary modules with the command npm install and import the modules in your angular application.
# install Angular Material 2 components
npm install --save #angular2-material/{core,button,card}
My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</html>
I was just following a tutorial in which a factory makes a $http.get() request and returns data which is affected to a controller's $scope variable ($scope.classifieds which is supposed to be shown in an ng-repeat loop) and the view doesn't get updated when the variable gets changed (logging the variable shows the data is successfully returned)
The view code is :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!!!</title>
<link rel="stylesheet" type="text/css" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/mdi/css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngClassifieds</strong></p>
<md-button>
<md-icon class="mdi mdi-plus-circle"></md-icon>
New Classifieds
</md-button>
</div>
</md-toolbar>
<md-content class="md-padding" layout="row" layout-wrap>
<md-card ng-repeat="class in classifieds" flex="30">
<img ng-src="{{ class.img }}"></img>
<md-card-content>
<div class="classified-info" ng-show="!showContact">
<h2 class="md-title">{{ class.title}}</h2>
<h3>{{ class.price | currency }}</h3>
<h4>{{ class.pdate | date : "MMMM d, y"}}</h4>
<p>{{ class.desc }}</p>
</div>
<div class="classified-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon> {{class.contact.name}}</p>
<p><md-icon class="mdi mdi-phone"> </md-icon> {{class.contact.phone}}</p>
<p><md-icon class="mdi mdi-email"> </md-icon> {{class.contact.email}}</p>
</div>
<div layout="row">
<md-button ng-click="showContact = true">Contact</md-button>
<md-button ng-click="showContact = false">Details</md-button>
</div>
</md-card-content>
<md-card>
<md-content>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="components/classifieds.ctrl.js"></script>
<script type="text/javascript" src="components/classifieds.fac.js"></script>
</body>
</html>
the controller :
(function(){
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", ["$scope", "$http", "classifiedsFactory", function($scope, $http, classifiedsFactory){
$scope.message = "'with this dynamic text'";
$scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){
return classified.data;
});
console.log('----->>> $scope.classifieds : ' + JSON.stringify($scope.classifieds));
}] );
})();
and the factory :
(function(){
"use strict";
angular.module("ngClassifieds").factory("classifiedsFactory", function($http){
function getClassifieds() {
return $http.get('data/classifieds.json');
}
return {
getClassifieds : getClassifieds
}
});
})();
I have seen many alike questions but didn't find an answer to this problem.
$http.get() is an asynchronous, you should assign the value in success callback method.
Use
classifiedsFactory.getClassifieds().then(function(classified){
$scope.classifieds = classified.data;
});
Instead of
$scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){
return classified.data;
});
I am using the Angular Material checkbox in my application. I am facing problem in assigning the value to a checkbox.
<div ng-repeat="rules in rulesList1.data.hits.hits">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-checked="_source.Enabled" class=" md-primary">
</md-checkbox>
</div>
When I use this my checkbox becomes non-editable. I couldn't check or uncheck the box on using the above code. I don't know where I am going wrong.
Thanks in advance.
My issue was resolved. The problem is when I retrieve the value it was in string format. Before assigning it to the view ng-model, convert the string into boolean.
After coverting to boolean my checkbox works fine.
Updated code
<div ng-repeat="rules in rulesList1.data.hits.hits">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-model="_source.Enabled" class=" md-primary">
</md-checkbox>
</div>
Look this:
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<div ng-app="StarterApp" ng-repeat="rules in items">
Test {{rules}}:
<md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" class=" md-primary" ng-checked="rules.ck" ng-click="rules.ck=!rules.ck" ng-disabled="{{!rules.editable}}" role="checkbox">
</md-checkbox>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function($scope){
$scope.items = [{ck:true, editable:false}, {ck:true, editable:true}, {ck:false, editable:true}];
}]);
</script>
</html>