selectAll/none options inside md-select
Hi, I'm trying to add selectAll/None option inside md-select, once selectAll checkbox is checked all other checkbox should be checked how to get control of other checkboxes is my problem please can anyone help me i need this very badly. code is down
thanks in advance.
<!doctype html>
<html>
<style>.selectdemoSelectHeader {
/* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
.selectdemoSelectHeader .demo-header-searchbox {
border: none;
outline: none;
height: 100%;
width: 100%;
padding: 0; }
.selectdemoSelectHeader .demo-select-header {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
padding-left: 10.667px;
height: 48px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
width: auto; }
.selectdemoSelectHeader md-content._md {
max-height: 240px; }</style>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller="HelloController" class="md-padding" ng-cloak>
<div>
<h1 class="md-title">Pick a vegetable below</h1>
<div layout="row">
<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables"
md-on-close="clearSearchTerm()"
data-md-container-class="selectdemoSelectHeader"
multiple>
<md-select-header class="demo-select-header">
<input ng-model="searchTerm"
type="search"
placeholder="Search for a vegetable.."
class="demo-header-searchbox md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-checkbox ng-model="selectedAll"ng-click="checkAll()" style="float:left">SelectAll/NONE</md-checkbox>
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
</div>
<script>
angular.module("myapp", ['ngMaterial'])
.controller("HelloController", function($scope,$element) {
$scope.vegetables = ['Corn' ,'Onions' ,'Kale' ,'Arugula' ,'Peas', 'Zucchini'];
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
</script>
</body>
</html>
Related
I am working on an application where I have to set item class to active but Its not working. It's not in the ng-repeat list. Its 4 normal button that has to be active when clicked on it.
Try achieving this by ng-class as shown below.
Controller
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
CSS
$base: #F8E1C2;
$button: #3D3240;
$button-active: #FF735C;
$margin: 40px;
body {
background: $base;
-webkit-font-smoothing: antialiased;
padding: $margin;
text-align: center;
}
.button {
border: none;
padding: 14px;
color: #fff;
margin: 0 10px;
background: $button;
font-weight: 700;
border-radius: 4px;
}
.active {
background: $button-active;
}
.disabled {
background: #eee;
color: #aaa;
}
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me</button>
</div>
</body>
</html>
remove single quotes on class name active, like from 'active' to active
I am trying to use meter tag to show battery power indicator. It works with hard coded value but does not work with $scope variable.Here is the jsfiddle
HTML
<div ng-app="app" ng-controller="main">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter>
</p>
</div>
</div>
**JS*
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.value = 2
}])
You have to use {{value}} to reflect the scope value.
So use,
value="{{value}}"
instead of
in value="value"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<style>
.styled meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 30px;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
/* WebKit */
.styled meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value {
background: #86CC00;
}
.styled meter::-webkit-meter-suboptimum-value {
background: #FFDB1A;
}
.styled meter::-webkit-meter-even-less-good-value {
background: #CC4600;
}
/* Firefox */
.styled meter::-moz-meter-bar {
border-radius: 3px;
}
.styled meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #FFDB1A;
}
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter>
</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = 2
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
Some observations as per your fiddle :
You forgot to include AngularJS library in your fiddle.
To get the $scope value into the HTML . Use angular expression {{value}}
Change LOAD TYPE to No wrap - in <head> from onLoad in JAVASCRIPT section of the fiddle.
DEMO
Here is my rows code:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.foo = function() {
alert("bla bla bla");
};
}]);
#rollDiv {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#rollDiv label span {
padding:5px 5px 2px 2px;
display:block;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-click='foo()' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>
At the example above foo event is fired when element checked and unchecked, can I make a call of the event from checkbox element only if checkbox is checked and event not called if I uncheck element.I don't feel like making any changes in controller.
Here is what you are looking for.
<input type='checkbox' ng-model='chkMonitor' ng-click='chkMonitor && foo()'>
chkMonitor is just a simple scope variable.
Explanation:
foo() function can be conditionally executed by placing it in a boolean expression. The following ...
ng-click='false && foo()'
will never execute the function. So, the task is to replace false with a variable which represent the check state. We can use $event.target.checked - but DOM referencing in angular expression is prohibited.
Solution is to bind a scope variable with the check box and use it with foo()
Of course there are conventional methods which can filter out clicks inside the foo() function. But your question was about NOT firing foo() if not checked.
Look this:
angular.module('myApp', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.foo = function() {
console.log("bla bla bla");
};
}
]);
#rollDiv {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#rollDiv label span {
padding: 5px 5px 2px 2px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-model="cbxTest" ng-click='read?"":foo();read=true' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>
I have an angular ngSwitch animation applied in 2 different ways, one within a directive, and one on the html page. The animation within the directive fires on page load. Why is this occurring and how to fix?
plunker: http://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body id="ng-app" ng-app="myApp" ng-controller="myAppCtrl">
Change value
<br><br>
<span><strong>Through directive</strong><small> - animation fires on page load</small></span>
<div value-rotate="myVal" style=""></div>
<br>
<span><strong>Not through directive</strong><small> - animation does no fire on page load</small></span><br>
<span class="value-rotate" ng-switch on="myVal">
<div class="value-rotate__value" ng-switch-when="true">value is {{ myVal }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ myVal }}</div>
</span>
</body>
</html>
script.js
'use strict';
angular.module('myApp', ['valueRotate'])
.controller('myAppCtrl', function($scope) {
$scope.myVal = true;
});
angular.module('valueRotate', ['ngAnimate'])
.directive('valueRotate', function() {
return {
scope: {
value: '=valueRotate'
},
templateUrl: 'value-rotate.html',
link: function (scope, element) {
element.css({ position: 'relative', overflow: 'hidden' });
}
};
});
style.css
.value-rotate {
position: relative;
display: inline-block;
}
.value-rotate__value {
padding: 10px;
}
.value-rotate__value.ng-animate {
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.value-rotate__value.ng-leave.ng-leave-active,
.value-rotate__value.ng-enter {
top: -50px;
}
.value-rotate__value.ng-leave,
.value-rotate__value.ng-enter.ng-enter-active {
top: 0;
}
value-rotate.html (directive template)
<span class="value-rotate" ng-switch on="value">
<div class="value-rotate__value" ng-switch-when="true">value is {{ value }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ value }}</div>
</span>
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.