I'm trying to add a class to the parent of an input when it gets focus. I can get the parent, but I can't seem to set the classname. Here's what I tried in this plunkr:
http://plnkr.co/edit/eEfSeDb7i3uujjBZt21z?p=preview
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />
<style>
.highlight {
border: 2px solid red;
}
.blue-border
{
border:2px solid blue;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script>
angular.module( 'app', [])
.run( function( $rootScope, $timeout ) {
$rootScope.focusInput= function($event )
{
angular.element($event.target).parent().className += " " + 'highlight';
console.log( angular.element($event.target).parent() );
};
$rootScope.blurInput= function($event )
{
angular.element($event.target).parent().className.replace(' highlight', '');
};
});
</script>
</head>
<body>
<div class="blue-border">
<input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>
</div>
</body>
</html>
Notice how it logs the parent successfully. However, the border does not turn red! Is there some other more "Angulary" way of doing this?
Angular's JQLite provides the 'addClass' and 'removeClass' functions for this:
angular.element($event.target).parent().addClass('highlight');
See the documentation here: https://docs.angularjs.org/api/ng/function/angular.element
Related
I know how to do Angular ngRoute using <a> tag. I would like to know if it's also possible for me to use <button> tag to navigate between <ng-view>. Let's say I have the following code:
app.js & index.html
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
// mapping contacts.html to path /cnt
$routeProvider.when('/cnt', {
templateUrl: "https://www.google.co.za/", // the file to be mapped to
controller: "cctrl" // including the controller for that file
});
// mapping student.html to path /std
$routeProvider.when('/std', { // mapping url
templateUrl: "https://www.facebook.com", // the file to be mapped to
controller: "sctrl" // including the controller for that file
});
});
// creating a controller name cctrl
app.controller('cctrl', function($scope) {
});
// creating a controller name sctrl
app.controller('sctrl', function($scope) {
});
ul.zzz{
list-style: none;
width: 100%;
margin: 10px auto;
}
ul.zzz li{
float: left;
padding: 10px;
}
.mainContent ng-view{
margin: 0;
}
<html ng-app="test">
<head>
<title>Angular Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
</head>
<body>
<div>
<ul class="zzz">
<li>Student
</li>
<li>Contacts
</li>
</ul>
<br/>
</div>
<div class="mainContent">
<ng-view>
</ng-view>
</div>
</body>
</html>
the code above shows the working html page
the code below is whats running in my mind if i use button
<button name="gotoPage2" ng-click="gotoNext()">Next</button>
<script>
var app = angular.module('test',[ngRoute]);
app.config(function($routeProvider){
$routeProvider.when('button with a name gotoPage2 is click',{
templateUrl:'page2.html'
})
});
// or
app.controller('controllerName', function($scope){
$scope.gotoNext = function(){
app.config(function($routeProvider){
$routeProvider.when('button with a name gotoPage2 is click',
{templateUrl:'page2.html'}
)
});
};
});
</script>
Have you try using ng-click on the button and have a function on the controller to change the route
Html
<button ng-click="changeRoute({view})">Text</button>
Controller
...
$scope.changeRoute(view){
$location.path(view);
}
...
I usually use ui-router, i like it better then ng-route
put the button tag inside <a> it will work
<li><button>name</button>
I use the ng-class to add and remove the class by clicking the ` Button,' is not does not work? I use the Angular1.
What is the reason?
<html lang="en" ng-app="xxx">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
background-color: black;
}
div.red {
background-color: red;
}
button {
width: 200px;
height: 50px;
background-color: gold;
}
</style>
</head>
<body ng-controller="ooo">
<script src="angular.js"></script>
<div ng-class="{red:isRed}" >xxxx</div>
<button ng-click="changColorIsRed()">O</button>
</body>
<script>
var app = angular.module('xxx',[]);
app.controller('ooo',['$scope',function ($scope) {
$scope.isRed = false;
$scope.changeColor = function () {
$scope.isRed = !$scope.isRed;
}
}]);
</script>
</html>
Is there another way to realize it?
You have a mistake in your code.
You define function changeColor but you use changColorIsRed in your ng-click attribute.
If you correct this to ng-click="changeColor()", your code will work.
Change
<button ng-click="changColorIsRed()">O</button>
To
<button ng-click="changColor()">O</button>
You have more than one mistake in your code:
Other than below change:
<button ng-click="changColorIsRed()">O</button>
To
<button ng-click="changColor()">O</button>
You can not use Angular's directives and then load the angular.js file.
You must to set the below code:
<script src="angular.js"></script>
on top of ng-app.
In this jsbin how can I update the element's content and add a class?
It seems that this.$.content.innerHTML = "Changed?" and this.classList.add('new') won't work.
The code in the jsbin is as follows:
<!DOCTYPE html>
<html>
<head>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<my-element>Some text</my-element>
<dom-module id="my-element">
<template>
<style>
:host {
background: lightgrey;
}
.new {
background: blue;
}
</style>
<content>
</content>
<button on-tap="make">Make blue</button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
make: function() {
this.$.content.innerHTML = "Changed?";
this.classList.add('new');
}
})
})
</script>
</dom-module>
</body>
</html>
This did the trick:
:host.new {
background: blue;
}
...
make: function() {
this.classList.add("new");
Polymer.dom(this).innerHTML = "changed?";
}
I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>
I want to add fade-in animation for new alerts pushed into array and fade-out for dismissed alerts.
Alerts are dismissed automatically after 5 seconds.
I've already included angular-animate ui-bootstrap and ui-bootstrap-tpls libraries.
How can i get these animations working?
See Demo: http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview
HTML
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>Alert With Animation</h1>
<uib-alert
ng-repeat="alert in alerts"
type="{{alert.type}}"
dismiss-on-timeout="5000"
close="alerts.splice($index, 1);">{{alert.msg}}
</uib-alert>
<input type='text' ng-model='msg' />
<button ng-click="addAlert(msg,'danger')">Add Alert</button>
</body>
</html>
SCRIPT
(function() {
var app = angular.module("myApp", ['ui.bootstrap', 'ngAnimate']);
app.controller("MainController", function($scope) {
$scope.alerts = [];
$scope.msg = "No Animation!";
$scope.addAlert = function(msg, type) {
$scope.alerts.push({
msg: msg,
type: type
});
};
});
}());
Answer is based on Pankaj's comment.
Which lead me to this article: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
added class='repeat-item' to <uib-alert>..</uib-alert> element.
added proper stylings for animation effects.
<style type="text/css">
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity: 1;
}
</style>
See working demo: https://plnkr.co/edit/CK2lV4mBVGs8q5gyYklE?p=preview
One little glitch
When you click to add an alert for the very first time, there is no fade-in animation. After that, everything seems OK.