I am new in Angular and
I am facing a problem right now that is, I have a number pad and some textboxes.
I have to input to the particular textbox from number pad.
Here is the Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = ''
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="count = count + 1">1</button>
<button id="btn2" ng-click="count = count + 2">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"/>
</div>
</body>
</html>
Now if I click on Textbox1 then click on button 1 or 2 text should be only on Textbox1 not textbox2
is it possible to bind value to value using ng-click like this
function on controller
$scope.change = function(evt) {
evt.target.value={{count}};
alert(evt.target.id)
html
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}" ng-click="change($event)"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}" ng-click="change($event)"/>
or some other way
I'm not 100% sure I understood what you want to do, but if I'm right, this should do what you want:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.field1count;
$scope.field2count;
$scope.selectedField = 0;
$scope.calculateField = function(amount){
var result = $scope.count + amount;
$scope.count = result;
if($scope.selectedField == 1){
$scope.field1count = result;
} else if($scope.selectedField == 2){
$scope.field2count = result;
}
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="calculateField(1)">1</button>
<button id="btn2" ng-click="calculateField(2)">2</button>
<label>Textbox1</label>
<input type="text" id="Textbox1" ng-focus="selectedField = 1" ng-model="field1count"/>
<label>Textbox2</label>
<input type="text" id="Textbox2" ng-focus="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>
If you want the two input fields to display different values, you need to actually assign them different values, as angular's two-way-binding means the value will be updated in both the model and the controller simultaneously.
Ng-focus can also be replaced by ng-click in this case, if you prefer using that. Ng-focus is triggered when the input field gains focus (When you use, for example, the tab key to reach the field, this will also be triggered), while ng-click does so when the field is clicked upon.
In this example ng-model="field1count" can also be replaced with value="{{field1count}}", as you did in your example, but the use of ng-model is more appropriate to the use of angular.
Working snippet:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.field1count;
$scope.field2count;
$scope.selectedField = 0;
$scope.calculateField = function(amount){
var result = $scope.count + amount;
$scope.count = result;
if($scope.selectedField == 1){
$scope.field1count = result;
} else if($scope.selectedField == 2){
$scope.field2count = result;
}
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="calculateField(1)">1</button>
<button id="btn2" ng-click="calculateField(2)">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" ng-click="selectedField = 1" ng-model="field1count"/>
<label>Textbox2</label><input type="text" id="Textbox2" ng-click="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>
You should use two separeted ng-model on your input if what you want is to output two different datas.
But I'm not really sure of what you want to do here .. Can you try to explain it a bit more ?
Related
I'am working on a project basically using Javascript (mainly webcam libraries). What i want to achieve is to manage when and where to use each library on a specific purpose.
To walk you through, first of all I provide different features that would potentially work according to what is selected from the radio buttons (See Figure 1).
For example in Default Mode none features are applied, however on the second radio button (Face Tracking Mode), I want to access a specific library and detect the face from the given input - which works.
The issue here is that I want to :
1)stop tracking faces,
2)clear everything on the canvas,
in case of changing the radio input selection.
My first idea to solve this, is to create a function that would do that every time i call it (when i change mode-radio button) -> see last function resetCanvasFeatures() that would basically use something like faceTracking.stop();
Im not sure if the following ideas (threads or jquery) would help here.
Please if you have any suggestions let me know.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Face Tracking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Libraries Declaration -->
<!-- p5js -->
<script type="text/javascript" src="libraries/p5.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.sound.min.js"></script>
<!-- tracking.js -->
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/tracking.js"></script>
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/data/face-min.js"></script>
<script src="libraries/tracking.js-master/tracking.js-master/examples/assets/stats.min.js"></script>
<!-- jquery.min.js-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<!--
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
-->
<!-- MY SCRIPT -->
<script src="scripts/faceTrackingTool.js"></script>
<!-- Reference Cascade Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles\styles.css">
</head>
<body>
<!-- ADD TITLE ELEMENT -->
<div>
<h1 id="main_Title">Mirror Mirror on the Wall</h1>
<p id="description">Welcome to this website. After enabling your webcam, simply select an option from the sections below.</p>
</div>
<!-- ADD RADIO BUTTONS (Program functionality is performed) -->
<div id="radioButtonController-container">
<form name="radioButtonControllerForm">
<section id="radioButtonsSection">
<!-- DEFAULT -->
<div>
<input type="radio" id="radio0" name="radioButtonController"
value="default">
<label for="radio0">
<h2>Default Mode : </h2>
<p>Canvas draws every frame of the video - No features are implemented here</p>
</label>
</div>
<!-- FACE TRACKING -->
<div>
<input type="radio" id="radio1" name="radioButtonController"
value="faceTracking" onClick="faceTracking()">
<label for="radio1">
<h2>Face Tracking Mode : </h2>
<p>Uses tracking.js library - Detects one or more faces from the given input</p>
</label>
</div>
<!-- SLIM TOOL -->
<div>
<input type="radio" id="radio2" name="radioButtonController"
value="slimTool">
<label for="radio2">
<h2>Slim Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- HAIR TOOL -->
<div>
<input type="radio" id="radio3" name="radioButtonController"
value="hairTool" disabled>
<label for="radio3">
<h2>Hair Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- BACKGROUND TOOL -->
<div>
<input type="radio" id="radio4" name="radioButtonController"
value="backgroundTool">
<label for="radio4">
<h2>Background Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- MORPH WITH TOOL -->
<div>
<input type="radio" id="radio5" name="radioButtonController"
value="morphTool">
<label for="radio5">
<h2>Morph Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
</section>
</form>
</div>
<br/><br/>
<!-- ADD EDITED CANVAS DIV ELEMENT -->
<div id="editingCanvas-container">
<!-- <canvas id="editingCanvas-element"></canvas> is added here from faceTrackingTool.js -->
<!-- <h3>Edited Canvas</h3> -->
</div>
<!-- ADD ORIGINAL VIDEO DIV ELEMENT -->
<div id="originalVideo-container">
<!-- <video id="originalVideo-element"></video> is added here from faceTrackingTool.js -->
<!-- <h3>Original Canvas</h3> -->
</div>
</body>
</html>
JAVASCRIPT FILE:
var canvas;
var canvasWidth = 640;
var canvasHeight= 480;
var videoElement; //Holds the video element (<video....>)
var frame; //Holds an image() object of every frame of the video
var selectedRadioButton; //Holds the value of the selected radio button
var tracker;
var trackingTask;
var faceTrackingMode = false; //TRUE- Open Tracking, FALSE-Declare variables once
function setup(){
//Set Default Radio Button (Get access from <form> element)
document.radioButtonControllerForm.radioButtonController[0].checked= true; //Default Mode
//Create original canvas and move it
//so it’s inside <div id="editedCanvas-container">
canvas = createCanvas(canvasWidth, canvasHeight); //480p
canvas.parent('editingCanvas-container');
canvas.id("editingCanvas-element");
//Change the style of the canvas so it presents a mirror
document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "40px";
//Activate Web-Camera,set attributes and move it
//so it’s inside <div id="originalVideo-container">
videoElement = createCapture(VIDEO);
videoElement.parent('originalVideo-container');
videoElement.id("originalVideo-element");
videoElement.size(canvasWidth, canvasHeight); //480p
//originalCapture.hide(); //Do not Hide Original Capture
var canvasTitle = createElement("h3", "Editing Canvas");
canvasTitle.parent('editingCanvas-container');
var videoTitle = createElement("h3", "Original Video");
videoTitle.parent('originalVideo-container');
}
function draw(){
/* Store every frame in the variable (Holds image() Object)*/
frame = image(videoElement, 0, 0, width, height);
// (Default, Face Tracking, Slim Tool, Hair Tool, Background Tool, Morph Tool)
selectedRadioButton = getSelectedRadioButtonValue();
radioButtonsMananger(selectedRadioButton); //Pass the selected Option Value to function
}
function getSelectedRadioButtonValue(){
var selected; //Set variable to hold selected value
//Default
if (document.radioButtonControllerForm.radioButtonController[0].checked) {
selected = document.radioButtonControllerForm.radioButtonController[0].value;
}
...........
else if (document.radioButtonControllerForm.radioButtonController[5].checked) {
selected = document.radioButtonControllerForm.radioButtonController[5].value;
}
return selected; //Return selected values
}
function radioButtonsMananger(selectedOption){
switch(selectedOption){
case "default":
resetCanvasFeatures();
//console.log("use default");
break;
case "faceTracking":
resetCanvasFeatures();
//faceTracking();
break;
...........
}
}
function faceTracking(){
//Check if the variables are already declared
if(faceTrackingMode === false){
myVideo = document.getElementById('originalVideo-element');
myCanvas = document.getElementById('editingCanvas-element');
myCanvasContext = myCanvas.getContext('2d');
//Open Tracker from tracking.js library
//Open tracker - use array (ObjectTracker(['face','eye','mouth']))
tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackingTask = tracking.track(myVideo, tracker, { camera: true });
faceTrackingMode = true; //Set to TRUE - Do not declare those variables again
}
trackingTask.run();
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
myCanvasContext.strokeStyle = '#a64ceb';
myCanvasContext.strokeRect(rect.x, rect.y, rect.width, rect.height);
myCanvasContext.font = '11px Arial';
myCanvasContext.fillStyle = '#000000 ';
myCanvasContext.fillText('x: ' + rect.x + 'px', rect.x +
rect.width + 5, rect.y + 11);
myCanvasContext.fillText('y: ' + rect.y + 'px', rect.x +
rect.width + 5, rect.y + 22);
});
});
}
function resetCanvasFeatures(){
setTimeout(function () {
trackingTask.stop();
}, 10000);
}
FIGURE
Using onchange tag on the input seems to be working great. no repeated loop functions.
<input type/id/name/value onchange="nameOfTheFunction()">
I am trying to construct MC test by pulling randomly specific number of questions from a test bank. Choices are listed using radio buttons. When test is submitted I wish to insert the ID of question and ID of selected choice in a table. I managed to store the Question ID but not the selected choice. All what I have for selected choice is NUll value. Below is my code. Any help please.
Thanks in advance.
#{
var db = Database.Open("COMPASSTestItems");
var SelectedQuestions = db.Query("SELECT TOP 2 * FROM Questions WHERE AreaID = 1 ORDER BY NEWID()");
var a="";
var b="";
if(IsPost){
foreach(var item in SelectedQuestions){
a=Request.Form["#row.ID"];
b=#item.ID.ToString();
var testresults = "INSERT INTO TestResults (QuestionID,DistractorID) Values(#0, #1)";
db.Execute(testresults,b,a);
}
Response.Redirect("~/Default");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
body
{
background-color: #fcf8e1
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<center><h1>Algebra Test - Answer All Questions Below</h1></center>
</head>
<body>
<div>
<form method="post">
<fieldset>
<ol>
#foreach(var row in SelectedQuestions)
{
var Dist = db.Query("SELECT * FROM Distractors WHERE QuestionId = #0 ORDER BY NEWID()",row.ID);
<li>#row.QStem</li>
foreach(var row1 in Dist)
{
<p> <input type="radio" name ="#row.ID" value="#row1.ID">#row1.Distractor </p><br>
}
}
</ol>
<p><input type="submit" name="buttonSubmit" value="EndTest" /></p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
You need to match the radio element name and pull the value back out of the Request object after the post.
Change:
<input type="radio" name ="#row.ID" value="#row1.ID">
To:
<input type="radio" name="answer-#row.ID" value="#row1.ID" />
And change:
a=Request.Form["#row.ID"];
b=#item.ID.ToString();
To:
a = Request.Form["answer-" + item.ID];
b = item.ID;
I want to create a small count button but don't know how to make it in JavaScript...
Here's the code :
HTML
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins">
<input type="button" value="+" id="plus">
</div>
It must increase AND decrease the number in the input[type=text] when click on the -/+ button.
Can someone help me ?
You'd need two things.
Variables - which are the way to store information in JavaScript
Event handlers, which are the way to react to events in JavaScript
First, let's create a script tag, and put a JavaScript count variable in it, we'll put it in the bottom of our body tag:
<script>
var count = 0;
</script>
Now, we want to create a handler, that is something that executes whenever the plus and minus signs are clicked
<script>
var count = 0;
function plus(){
count++;
}
function minus(){
count--;
}
</script>
We've created two functions to call when the buttons are clicked, but we do not update the value in the HTML, or call them yet, let's update the value in the HTML.
We'll do so by document.getElementByID for the element to update and then change its value. Our script tag should look something liks this:
<script>
var count = 0;
var countEl = document.getElementById("count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
count--;
countEl.value = count;
}
</script>
One last thing, we need to tell the elements in the DOM to execute those handlers.
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>
We've added them as event handlers to the DOM reacting to a click on the buttons, completing the task.
Now, here are some things we can improve:
We can use addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.
We can use a more advanced tool like KnockoutJS to handle binding the value we have to the DOM element instead of updating it ourselves.
We can read Eloquent JavaScript and learn more about how the language works!
Good luck, happy JavaScripting, and happy learning :)
DEMO FIDDLE FOR JAVASCRIPT
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" onClick = "doMinus();" />
<input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>
code javaScript -
function doMinus(){
document.getElementById("count").value = --document.getElementById("count").value;
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
jQuery Version
DEMO FIDDLE FOR JQUERY
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" />
<input type="button" value="+" id="plus" />
</div>
code jQuery -
$('#minus').click(function(){
$("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
$("#count").val(parseInt($("#count").val())+1);
});
U can write some script as shown
<script>
function increase(){
var a = 1;
var textBox = document.getElementById("count");
textBox.value = a;
a++;
}
</script>
<body>
<button type="button" onclick="increase()">+</button>
<input type="text" id="text">
</body>
similarly u can do it for - decrease button
in this case, I use input type range that display a slider :
<input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span>
(instead of input type number that is not supported by IE)
This seems pretty simple.
(function() {
var count = 0;
var minusButton = document.getElementById("moins");
var plusButton = document.getElementById("plus");
var countBox = document.getElementById("count");
minusButton.onclick = function(e) {
countBox.value = --count;
};
plusButton.onclick = function(e) {
countBox.value = ++count;
};
})();
I cannot see what is wrong here but the image does not display using the following Knockout template:
<script type="text/html" id="legend-template">
<div><input type="checkbox" data-bind="click : doSomething" ></input>
<img width="16px" height="16px" data-bind="src: 'imagePath'" />
<span data-bind="text : label"> </span>
</div>
</script>
The object this is being bound to looks like this:
tut.myObject= function (imagePath, label) {
this.label = ko.observable(label);
this.imagePath = ko.observable(imagePath || liveString + '/Content/images/marker.png');
};
tut.myObject.prototype = {
doSomething: function () { alert("do what?");
}
};
When the HTML object is rendered I see the label and clicking on the checkbox invokes doSomething.
TIA.
Only a few attributes can be bound directly; try using attr - it will let you set any attribute on an element.
<img width="16px" height="16px" data-bind="attr:{src: imagePath}" />
I have...
a dynamic populated select box
several input boxes
a submit button
form fields are loaded initially using cookies
several dynamic populated divs
I want...
start loading the content of my DIVs after all FORM elements have been loaded completely (= filled with data, select boxes are populated)
Sample code:
<script type="text/javascript">
$(document).ready(function() {
// Populate <select>
var options ='';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + i + '">' + i + '</option>';
}
$("select#myid").html(options);
})
...
</script>
<form>
<select id="myselect></select>
<input id="mytext" type="text" value="" />
<input type="submit" value="Search" />
</form>
<% foreach( MyElement element in MyListing) { %>
<div>
<script type="text/javascript">
$(document).ready(function() {
DoSomething($(select#myid).val());
})
</script>
</div>
<% } %>
Any help is very appreciated.
Edited for the extra information:
jQuery(function($) { // note that this is equivalent to $(document).load()
// if we are here, then all your page and form elements have loaded.
// Populate <select> as per your code above
$('div').each(function(index) { // perhaps give them a class?
$(this).load(<<someURL>>);
// it's not clear from your question how you intend to get the
// dynamic content, ie: what url to use?
});
});