I am trying to have the web page as easy to use with the keyboard as with the mouse and need to be able to respond when a control receives and loses the focus. I've built a small plunk to illustrate this. I've used the event names from jquery as the documentation seemed to say that was the appropriate thing to do.
Tabbing through the screen to each button should show text saying which button has focus.
Here's the html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body data-ng-controller="bbbb">
<input id="b1" type="button" value="button1">
<input id="b2" type="button" value="button2">
<input id="b3" type="button" value="button3">
<h2 ng-show="showb1">Button1 has focus</h2>
<h2 ng-show="showb2">Button2 has focus</h2>
<h2 ng-show="showb3">Button3 has focus</h2>
</body>
</html>
and the js
var app = angular.module('app', []);
var controllerId = 'bbbb';
app.controller('bbbb', ['$scope', function ($scope) {
$scope.showb1 = false;
$scope.showb2 = false;
$scope.showb3 = false;
var b1 = angular.element('#b1');
b1.on('focusin', function (event) {
$scope.showb1 = true;
});
b1.on('focusout', function (event) {
$scope.showb1 = false;
});
var b2 = angular.element('#b2');
b2.on('focusin', function (event) {
$scope.showb2 = true;
});
b2.on('focusout', function (event) {
$scope.showb2 = false;
});
var b3 = angular.element('#b3');
b3.on('focusin', function (event) {
$scope.showb3 = true;
});
b3.on('focusout', function (event) {
$scope.showb3 = false;
});
}
]);
Help greatly appreciated
Please see here: http://plnkr.co/edit/zOk0CJv0IdMb3GzvLxT5?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body data-ng-controller="bbbb">
<input id="b1" type="button" value="button1" ng-focus="showb1 =true" ng-blur="showb1 =false">
<input id="b2" type="button" value="button2" ng-focus="showb2= true" ng-blur="showb2 =false">
<input id="b3" type="button" value="button3" ng-focus="showb3= true" ng-blur="showb3 =false">
<h2 ng-show="showb1">Button1 has focus</h2>
<h2 ng-show="showb2">Button2 has focus</h2>
<h2 ng-show="showb3">Button3 has focus</h2>
</body>
</html>
Related
I am new to angularjs. I am trying a simple program which have check boxes and a disabled button. The button should be enabled after one or multiple checkboxes are selected. However, my solution seems to be not working. Any help in this respect will be great.
HTML code:
<html ng-app="Apps" ng-controller = "chk">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >
<label ng-repeat="lbl in lbls">
<input type="checkbox" ng-model="chkd" > {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="!chkd"/>
</div>
</center>
</body>
</html>
here is the JS is file:
var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){
$scope.lbls = [
'Apples',
'Bananas',
'Apricots',
'Peaches'
];
});
It looks like you have to have separate conditions for each of the checkboxes for ng-disabled to detect a change. Use this HTML layout instead:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div ng-app>
<input type="checkbox" ng-model="cb01"> Apples
<input type="checkbox" ng-model="cb02"> Bananas
<input type="checkbox" ng-model="cb03"> Apricots
<input type="checkbox" ng-model="cb04"> Peaches
<br>
<input type="button" value="Submit" ng-disabled="!(cb01||cb02||cb03||cb04)">
</div>
</center>
</body>
</html>
jsfiddle
EDIT
Code should now be working fine. Sorry for the confusion!
Here is an approach which you can insert other fruits, and don't need to change code in your ng-disabled:
var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){
$scope.chkd = {
Apples: false,
Bananas: false,
Apricots: false,
Peaches: false
};
$scope.enableSubmit = function(){
var atLeastOneSelected = [];
for (var fruit in $scope.chkd) {
if($scope.chkd[fruit] === true){
atLeastOneSelected.push(fruit);
}
}
return !(atLeastOneSelected.length > 0);
}
});
<html ng-app="Apps" ng-controller = "chk">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >
<label ng-repeat="(lbl, enabled) in chkd">
<input type="checkbox" ng-model="chkd[lbl]"> {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="enableSubmit()"/>
</div>
</center>
</body>
</html>
Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
when i am using $scope object to bind function and variable,and making changes accordingly in HTML the code is working fine ,but not with this object.
var app = angular.module("myApp", []);
app.controller("myCtrl", myCtrl);
function myCtrl()
{
console.log("registering app");
this.valueOne="0";
this.valueTwo="0";
this.result="0";
this.add=function () {
console.log("in add");
this.result=parseFloat(this.valueOne)+parseFloat(his.valueTwo);
valueOne="";
valueTwo="";
}
this.subtract=function () {
this.result=parseFloat(this.valueOne)-parseFloat(his.valueTwo)
valueOne="";
valueTwo="";
}
this.multiply=function() {
this.result=parseFloat(this.valueOne)*parseFloat(his.valueTwo)
valueOne="";
valueTwo="";
}
this.divide=function() {
this.result=parseFloat(this.valueOne)/parseFloat(his.valueTwo)
valueOne="";
valueTwo="";
}
}
<!DOCTYPE html>
<html lang="en-US">
<script src="angular.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="myCtrl">
<p>Value 1 : <input type="text" ng-model="myCtrl.valueOne" placeholder="Value 1"></br>
Value 2 : <input type="text" ng-model="myCtrl.valueTwo" placeholder="Value 2"></br>
<button ng-click="myCtrl.add()">Add</button>
<button ng-click="myCtrl.subtract()">subtract</button>
<button ng-click="myCtrl.divide()">divide</button>
<button ng-click="myCtrl.multiply()">multiply</button>
</p>
<h1>Calculation Result {{myCtrl.result}}</h1>
</div>
</div>
</body>
</html>
And from where i am taking reference it is working fine there
var app = angular.module("calculatorApp", []);
app.controller("CalculatorCtrl", CalculatorCtrl);
function CalculatorCtrl() {
this.resultValue = 0;
this.buttonClicked = function(button) {
this.selectedOperation = button;
}
this.computeResult = function() {
var number1 = parseFloat(this.input1);
var number2 = parseFloat(this.input2);
if (this.selectedOperation === '+') {
this.resultValue = number1 + number2;
}
else if (this.selectedOperation === '-') {
this.resultValue = number1 - number2;
}
else if (this.selectedOperation === '*') {
this.resultValue = number1 * number2;
}
else if (this.selectedOperation === '/') {
this.resultValue = number1 / number2;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="calculatorApp">
<head>
<title>Calculator App</title>
<script src='angular.js'></script>
<script src='app.js'></script>
</head>
<body>
<h1>Calculator App</h1>
<div ng-controller="CalculatorCtrl as ctrl">
<input type="text" ng-model="ctrl.input1"></input>
<span ng-bind="ctrl.selectedOperation"></span>
<input type="text" ng-model="ctrl.input2"></input>
<button ng-click="ctrl.computeResult()">=</button>
<span ng-bind="ctrl.resultValue"></span>
<p>
Choose operation:
<button ng-click="ctrl.buttonClicked('+')">+</button>
<button ng-click="ctrl.buttonClicked('-')">-</button>
<button ng-click="ctrl.buttonClicked('*')">*</button>
<button ng-click="ctrl.buttonClicked('/')">/</button>
</p>
</div>
</body>
</html>
Not able to get what i am doing wrong .
What you missed is a tiny detail:
In working code:
ng-controller="CalculatorCtrl as ctrl" it had this.
Where as, your code:
ng-controller="myCtrl" has this. It means your HTML code didn't have a reference of your controller.
You can just change it to ng-controller="myCtrl as myCtrl" and it should work fine!
Also, your code snippet was having occurances of his instead of this in controller methods. Fixed those. And following is your working snippet:
var app = angular.module("myApp", []);
app.controller("myCtrl", myCtrl);
function myCtrl()
{
console.log("registering app");
this.valueOne="0";
this.valueTwo="0";
this.result="0";
this.add=function () {
console.log("in add");
this.result=parseFloat(this.valueOne)+parseFloat(this.valueTwo);
valueOne="";
valueTwo="";
}
this.subtract=function () {
this.result=parseFloat(this.valueOne)-parseFloat(this.valueTwo)
valueOne="";
valueTwo="";
}
this.multiply=function() {
this.result=parseFloat(this.valueOne)*parseFloat(this.valueTwo)
valueOne="";
valueTwo="";
}
this.divide=function() {
this.result=parseFloat(this.valueOne)/parseFloat(this.valueTwo)
valueOne="";
valueTwo="";
}
}
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="myCtrl as myCtrl">
<p>Value 1 : <input type="text" ng-model="myCtrl.valueOne" placeholder="Value 1"></br>
Value 2 : <input type="text" ng-model="myCtrl.valueTwo" placeholder="Value 2"></br>
<button ng-click="myCtrl.add()">Add</button>
<button ng-click="myCtrl.subtract()">subtract</button>
<button ng-click="myCtrl.divide()">divide</button>
<button ng-click="myCtrl.multiply()">multiply</button>
</p>
<h1>Calculation Result {{myCtrl.result}}</h1>
</div>
</div>
</body>
</html>
I need one help.I need to check the radio button and set its value using Javascipt/Jquery.I am explaining my code below.
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
document.getElementById('btn').onclick=function(){
var qdata='123';
$('#answer_type0[value="' + qdata + '"]').prop('checked', true).trigger('click');
//$('#answer_type0').prop("checked",true);
console.log('checked',$("#answer_type0").prop("checked"));
}
function selectScale(){
console.log('value');
}
</script>
On the above code when user will click on Edit button the radio button should check and the click should trigger. But in my case its not happening like this. Here the plunkr is present.Please help me.
Try like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
$(document).ready(function(){
document.getElementById('btn').onclick=function(){
$('#answer_type0').prop("checked",true);
}
function selectScale(){
console.log('value');
}
});
</script>
</body>
</html>
Here is answer
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script>
document.getElementById('btn').onclick = function() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').prop('checked', true).trigger('click');
console.log('checked', $("#answer_type0").prop("checked"));
}
function selectScale() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').val('some_value');
console.log('some_value');
}
</script>
A simplified version of the code:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.addressForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
which looks in the browser like this:
When I click "REMOVE" and then "NEXT" - javascript error is produced:
Error: $scope.addressMainForm.addressForm is undefined
Why is it undefined if there is clearly still one element remaining in the array? Everything otherwise works fine (console.log output), until all the elements are removed but the last one and "NEXT" is clicked.
When you call $scope.addressMainForm.addressForm.$valid , you are attempting to call check to see if the adressForm element is valid, but your remove function has removed the addresses entry associated with that element. So the form indeed still exists, but that call becomes illegal.
Try this:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>