I am new on this field, and have tried this for a long time. You can see my simple version here:
https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview
Could you tell me why my onclick here doesn't work? My button is the 2signUp botton, Thanks!
js:
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
var sub1 = document.getElementsByClassName("haha")[0];
sub1.onclick=function(){
$scope.logged = !$scope.logged;
}
})
html:
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button class="haha">2Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
Use the Angular way of handling click events, don't use any document.getElementById() jazz when you have angular to do the work for you.
This is why you should let angular handle it
Data Binding
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
https://angularjs.org/
Use Angular's ngClick
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
$scope.signup = function() {
$scope.logged = !$scope.logged;
alert("ran the function");
}
})
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button id="haha" ng-click="signup()">2Sign Up</button> <!-- use ngClick here! -->
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
</html>
Related
I'm creating a button to check all checkboxes. The problem is that my "all check" button doesn't work to check off all checkboxes when I click the button.
How can I do this?
angular.module('myapp', [])
.controller('MainController', ['$scope', function($scope) {
$scope.allcheck = function(){
angular.forEach($scope.checkboxes, function(item){
item.selected = event.target.checked;
});
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<div ng-controller="MainController">
<button ng-click="allcheck()">all check</button>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</div>
</body>
</html>
When you start with Angular you should think and do in angular.
First you define your model:
$scope.selected = [false, false, false];
Then you render your model into view, using repeat. (I don't remember the syntax)
<div ng-repeat="item in selected">
<input type="checkbox" ng-model="item" />
</div>
Then you implement check all by just simply changing the model.
$scope.checkAll = function() {
for (var i = 0; i < $scope.selected.length; i++) {
$scope.selected[i] = true;
}
}
Don't think like you are working with JQuery, think like MVC.
I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.
I have no idea about Angular.js. But want I want to do is
this
<head>
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
</head>
and this
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
any idea?
Here is angular js code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
//write your code here to perform some action on calling this function
//Android.showToast(toast);
alert(toast);
console.log(toast);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
</html>
You should go through docs first of angular :
Its so simple as below :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
Android.showToast(toast); // Android should be inject as an dependency otherwise it would be undefined.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
I managed to create a simple example for you. I was missing the Android class, so I tested it using the alert() function.
AngularJS 2
Plunkr Demo
Guidelines
AngularJS's Controller As and the vm Variable
File-closure and Strict mode
Angular Components
ngApp
ngController
ngClick
(function() {
"use strict";
function exampleController() {
var vm = this;
vm.showAndroidToast = showAndroidToast;
function showAndroidToast(message) {
alert(message); // replace this with your toast message
}
}
var app = angular.module("exampleApp", []);
app.controller("exampleController", exampleController);
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="exampleController as vm">
<input type="button" value="Say hello" ng-click="vm.showAndroidToast('Hello Android!')" />
</body>
</html>
index.html
<html ng-app='myApp'>
<head>
<title>TODO supply a title</title>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/using built-in directives.js" type="text/javascript"></script>
</head>
<body>
<h1>Using ng-disabled directive</h1>
Name:<input type="text" ng-model="name"/>
<br/>
<button ng-disabled="!name" >sign in</button>
<hr/>
<h1>Button enabled after specified number of seconds </h1>
<button ng-disabled="isDisabled" >sign in</button>
</body>
</html>
using built-in directives.js
var app = angular.module('myApp',[]);
app.run(function($rootScope){
$rootScope.isDisabled = true;
setTimeout(function(){
$rootScope.isDisabled = false;
},3000);
In the beginning when page loads button stays disabled as it should but after 3 seconds it isn't enabled. Why is that?
When you use setTimeout, the model change is done outside angular context, therefore it does not trigger a digest.
Replace:
setTimeout(function(){
// ...
},3000);
with
$timeout(function(){
// ...
}, 3000);
My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>