I've been having a lot of problems recently trying to get my constructor work with my angular project so I created a test component. The code is supposed to toggle a message that says "hello test" by clicking a button. Please let me know why my constructor isn't responding.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="app.component.js"></script>
</head>
<body>
<div ng-app="postEvent"
ng-controller="postCtrl">
<button> reg button test </button>
<button ng-click="toggle()"> toggle test </button>
<button ng-show="state"> state test </button>
</div>
</body>
// app.component.js
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
Remove
function ctrl($scope) {
}
which is unecessary here.
DEMO
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="postEvent" ng-controller="postCtrl"> <button ng-click="toggle()">test </button> <div ng-show="state" > hello test </div> </div>
<script type="text/javascript">
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
</script>
Related
I am creating a program which generates a quote every time you press the button 'Generate quote'. I am using this API to get the quotes:
https://thesimpsonsquoteapi.glitch.me/quotes
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Quote Generator</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="quoteGenerator">
<button id="btn" type="button" ng-click="generateQuote()"> Generate quote</button>
<button id="btn1" type="button" ng-click="test()"> Test</button>
<br>
<label id="label" for="btn" ng-model="label"></label>
</body >
</html>
app.js:
var app= angular.module('myApp',[]);
app.controller('quoteGenerator',['$scope','$http', function ($scope, $http) {
var html="https://thesimpsonsquoteapi.glitch.me/quotes";
$scope.generateQuote=function generateQuote() {
$http.get(html)
.then(function(data) {
$scope.data = data;
console.log($scope.data);
document.getElementById("label").innerHTML=data;
})
}
}])
At the moment in the console log I am getting each object's details like character name, quote etc and on the label I am getting 'object Object'. But how do I retrieve simply the quote and print it onto the label.
In Angular you should not modify the DOM directly. So remove this line:
document.getElementById("label").innerHTML=data;
Instead, change the HTML of the label like so:
<label id="label" for="btn">{{data[0].quote}} - {{data[0].character}}</label>
The data you get is structured object, you need to get into each object in list and each property of it to show value inside template like above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Quote Generator</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body ng-app="myApp" ng-controller="quoteGenerator as vm">
<button id="btn" type="button" ng-click="generateQuote()"> Generate quote</button>
<button id="btn1" type="button" ng-click="test()"> Test</button>
<br>
<p>Output Message : {{label}}</p>
</body >
<script>
var app= angular.module('myApp',[]);
app.controller('quoteGenerator',['$scope','$http', function ($scope, $http) {
var html="https://thesimpsonsquoteapi.glitch.me/quotes";
$scope.label = 'hello';
$scope.generateQuote=function() {
$http.get(html)
.then(function(data) {
$scope.data = data;
console.log($scope.data);
$scope.label = data.data[0].quote;
})
}
}])
</script>
</html>
I've not worked on angularJS. I'm trying to navigate to a different page using button onclick functionality.
<html>
<head>
<script src="js/angular.min.js"></script>
</head>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<body ng-app="myapp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click</button>
</div>
<script src="script.js"></script>
</body>
</html>
Here is the JS code
var VLogin = angular.module('myapp',[]);
VLogin.controller('TestCtrl', function($scope) {
$scope.clicked = function(){
window.location = "#/index.html";
};
});
Try this:
$scope.clicked = function(){
window.location.href = "#/index.html";
};
I'm trying to trigger a click on a link, but it only runs the ng-click
From MyScript.js:
$timeout(function () {
angular.element(document.querySelector('#cancelButton')).triggerHandler('click');
}, 0);
And from Index.cshtml:
<input class="popupButton" type="button" value="Anuluj" />
I know that the way I did with
<a...><input... /></a>
is wrong,
but the important thing is: how to it to click the link and the ng-click?
I have written a simple program to navigate to the link.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="app">
<div ng-controller="ctrl">
Redirect to Click Me!
</div>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $log, $window) {
$scope.redirect = function () {
var url = "http://www.google.com";
$window.location.href = url;
};
});
</script>
</body>
</html>
Is this what you wanted?
I have this button with data="test" when I mouseover the button I want to show the word test in {{Detail}} when I mouse out from the button {{Detail}} should show nothing.
</head>
<body ng-app="">
<button ng-mouseover="Detail = data" data="test" >MouseOver Me</button>
Details: {{Detail}}
</body>
</html>
<button ng-mouseover="Detail = data" ng-mouseleave="Detail=''" ng-init="data='test'" >
i think this code is useful for you
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.data="test"
$scope.hoverIn = function () {
this.hoverEdit = true;
};
$scope.hoverOut = function () {
this.hoverEdit = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl" >
<button ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" title="{{data}}">MouseOver Me</button>
Details: <span ng-show="hoverEdit">{{data}}</span>
</body>
</html>
I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.
do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?
Similar to this thread:
Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?
I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().
Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
document.getElementById("id123").select();
}
</script>
</body>
</html>
Here is the code I have so far,:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" id="txt1"/>
<button ng-click="selectOnClick()">Select Txt</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
</script>
<script type="text/javascript">
var mod1 = angular.module('demo', []);
mod1.controller('DemoCtrl', function ($scope) {
$scope.content = 'some text';
});
mod1.directive('selectOnClick', function () {
// Linker function
var element1 = angular.element("txt1");
element1.select();
});
</script>
</body>
</html>
http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview
Simple way to do is using click event.
for example
<input type = "text" (click) = "$event.target.select()">
Can you try this:
http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" select-on-click />
<p>Content: {{content}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app:
(function (angular) {
var module = angular.module('demo', []);
module.controller('DemoCtrl', function ($scope) {
$scope.content = 'foobar';
});
module.directive('selectOnClick', function () {
// Linker function
return function (scope, element, attrs) {
element.bind('click', function () {
this.select();
});
};
});
}(angular));
you just need to move the select-on-click to a button