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.
Related
I want to create a button with a ripple effect on clicked.Is it necessary to achieve it through a directive. How do i handle the javascript required to handle the click and propagate the ripple away from the point it was clicked.
I have done it using javascript and css but it is not the angular way.
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
This is derived from my question here: Changing style on <body> element where the suggestion was to style a top level DIV. Having tried that I find that I get a different output using React compared to direct HTML. I am at a loss to understand why.
Consider a very simple react app consisting of a basic index.html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id='root'></div>
<script src="https://fb . me / react-15.0.1.js"></script>
<script src="https://fb . me / react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
and a corresponding main.js file
var TestDiv = React.createClass({
render: function () {
const style = {
divStyle: {
height: "100%",
background: "red"
}
}
return (
<div style={style.divStyle}>
<h1>Hello World</h1>
</div>
)
}
});
ReactDOM.render(<TestDiv/>, document.getElementById('root'));
Rendering this produces a blue screen with a red bar at the top with the text on. With the DIV set to a height of 100% I had expected the red background to fill the viewport.
Now, take the output from that React app (as given by Chrome Inspector) and create a simple html file from it.
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id="root">
<div data-reactroot="" style="height: 100%; background: red;">
<h1>Hello World</h1>
</div>
</div>
<script src="https://fb . me/react-15.0.1.js"></script>
<script src="https://fb . me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
The code is essentially the same but this renders with the whole viewport in red and no blue at all.
Why?
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'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
In the following extJS page, when I click the button, the content of the HTML Div "buttonInfo" changes correctly.
I want to also change the contents of the panel that I created with extJS.
However, when I change the contents of the panel as I do the div, the whole panel is simply replaced.
How can I change the contents of my panel object from within my button's click handler?
before:
after:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<style type="text/css">
body {
padding: 20px;
}
div#infoBox {
margin: 10px 0 0 0;
width: 190px;
height: 100px;
background-color: lightblue;
padding: 10px;
}
div#content {
margin: 10px 0 0 0;
}
div.x-panel-body {
padding: 10px;
}
</style>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title>Simple extJS</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('buttonInfo').on('click', function(){
Ext.get('infoBox').update('This is the <b>new</b> content.');
Ext.get('panel1').update('new info');
//Ext.get('panel1').html = 'new info111'; //doesn't work
//panel1.html = 'new info222'; //doesn't work
});
new Ext.Panel({
id: 'panel1',
renderTo: 'content',
width: '210px',
title: 'Extended Info',
html: 'original text',
collapsible: true
});
});
</script>
</head>
<body>
<button id="buttonInfo">
Show Info
</button>
<div id="infoBox">
</div>
<div id="content-wrapper">
<div id="content"></div>
</div>
</body
>
Ext.get gives you the dom object, use Ext.getCmp instead so that it returns the Ext object back, then you can use the update method on the panel:
Try:
Ext.getCmp('panel1').update('new info');
Hope it helps.
Try:
var Data = 'new info';
panel1.overwrite(panel1.body, Data);
panel1.doComponentLayout();