<div>
ToDo<br>
<input ng-show="add" type="checkbox" >{{val}}
</div>
<div>
<input type="text" ng-model="ToDo">
<input type="button" ng-click="addToDo()" name="btn" placeholder="add todo here" ng-model="add" value="add" />
</div>
And the javascript:
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope,$log){
$scope.addToDo = function(){
$scope.val = $scope.ToDo;
}
});
If i click on the 'add' button, a checkbox should appear along with the text of the texxtbox. But only text is showing, no checkbox. How do i display the checkbox?
You have to call the function in your controller and update some variable to true/ false. Based on the value and using ng-if directive, you can toggle the HTML element.
$scope.displayCheckBox = false;
$scope.val = "someRandoValue";
$scope.addToDo = function() {
$scope.displayCheckBox = true;
};
<div>
ToDo<br>
<span ng-if="displayCheckBox">
<input type="checkbox" >{{val}}
</span>
</div>
Related
I am attempting to create an expandable form to create on/off instructions that a user can submit times for in pairings, so my HTML defaults with one pair and the user can use a button to add additional pairs, but when i submit the form angular is only reading the first pairing, can someone point out what I am missing here? Am I appending in the extra fields improperly?
HTML
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<!-- <input type="submit" ng-click="createRecipe(recipe)" value="Generate Recipe"> -->
</form>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
</div>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
JS:
app.controller('CreateRecipeController', ['$scope', '$location', '$routeParams', 'DashFactory', function($scope, $location, $routeParams, DashFactory){
console.log("entered Create Recipe controller");
var columnCount = 1;
$scope.addColumn = function addColumn(){
columnCount++;
console.log('attempting to create column');
var d = document.createElement("div");
d.className = "inputField";
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
var d2 = document.createElement("div");
d2.className = "form-group"
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"number");
i.setAttribute('ng-model',"recipe.on"+columnCount);
i.setAttribute('value',"");
var d3 = document.createElement("div");
d3.className = "form-group"
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"number");
s.setAttribute('ng-model',"recipe.oz"+columnCount);
s.setAttribute('value',"");
s.setAttribute('readonly','readonly')
var d4 = document.createElement("div");
d4.className = "form-group"
var t = document.createElement("input"); //input element, Submit button
t.setAttribute('type',"number");
t.setAttribute('ng-model',"recipe.off"+columnCount);
t.setAttribute('value',"");
d.appendChild(f);
f.appendChild(d2);
f.appendChild(d3);
f.appendChild(d4);
d2.appendChild(i);
d3.appendChild(s);
d4.appendChild(t)
document.getElementsByClassName('timingSelect')[0].appendChild(d);
}
$scope.createRecipe = function(recipe){
console.log('recieved recipe data', recipe);
DashFactory.createRecipe(recipe)
}
}
]);
Great - Just move all your buttons inside your form tag like the code below
<div class="timing">
<form class="timingSelect" action="index.html" method="post">
<div class="inputField">
<div class="form-group">
On: <input type="number" ng-model="recipe.on1" value="" step=".1">
</div>
<div class="form-group">
oz: <input type="number" ng-model="recipe.oz1" value="" readonly="readonly">
</div>
<div class="form-group">
Off: <input type="number" ng-model="recipe.off1" value="" step='.1'>
</div>
</div>
<button type="submit" ng-click="createRecipe(recipe)">Submit</button>
<button type="button" class="next" name="button" ng-click="addColumn()">+</button>
</form>
</div>
And don't add another form when you append a new input field just add all your new inputs inside the existing form and try to submit it again - This might work
Thanks - Happy Coding !!
I have this code and I need to pass the text to the tooltip whether checkbox is active or not, so this will display eg. "active" when checkbox is active and "disactive" when not. How to do that?
<div class="wifi__switcher switcher">
<input type="checkbox" [id]="wifiIdentifier" class="input switcher--input js-checkbox" [checked]="activated" (click)="saveState()">
<label class="switcher--label" [for]="wifiIdentifier" matTooltipPosition="above" matTooltip="(tooltipMessageAccordingToCheckboxState)">Toggle</label>
<!--</div>-->
</div>
DEMO
HTML:
<div class="wifi__switcher switcher">
<input type="checkbox" class="input switcher--input js-checkbox" [checked]="activated" (change)="saveState($event)">
{{activated}}
<label matTooltipPosition="above" matTooltip="{{activated?'activated': 'not active'}}">Toggle</label>
</div>
TS:
activated: boolean = false;
saveState(ev){
if(ev.target.checked){
this.activated = true
} else{
this.activated = false
}
}
The following form shows a list of data on submit. I am trying to show no results found when there is no data on submit. I tried like shown below,it shows and hides the div. But when there is no options selected on form and click submit button it shows the no result div.How to show the no results div only when form validation succeeds and there is no data to display.
HTML
<div class="form-group" >
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" ng-model="radioption"
ng-required="!radioption"> MAIN 1</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" >
Main 2</label>
<div ng-show="!radioption && buttonClicked">Please select one.</div>
</div>
<div class="form-group">
<label ng-repeat="branch in branches">
<input type="checkbox" name="selectedBranches[]" value="{{branch.value}}"
ng-model="branch.selected" ng-required="isOptionsRequired()" >
{{branch.name}}</label>
<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>
<input type="button" ng-click="fetchresults()" value="submit" >
<div ng-show="buttonClicked">
<table> <thead>.....</thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="r in results">
<td></td></tbody></table>
</div>
<div ng-show="buttonClicked">
<span ng-show="results.length==0 ">No results.</span>
</div>
Minimal Controller Code
$scope.fetchresults = function(){
$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], });
$scope.buttonClicked = true;
}
EDIT:
I used model to validate and $valid is also working, as suggested below.But Got a couple of glitches. If i click the button it does not show div. but after validation is over it shows automatically "no results" from the click before. How to stop this.And while it lists data when its available it shows "no results" for a second or so
Give your form a name
<form name="formName">
Then you can do
ng-show="results.length==0 && formName.$valid"
Some more information on angularJS form validation
You can check the below snippet, I have changed most of them in angular way with $invalid, $pristine, $submitted and $valid.
You can check the angular documentation to read about them.
Link 1, Link 2
Note: You can use a submit button and get rid of ng-click event and use ng-submit instead which can't be used in this snippet as form submit is not allowed. Comment the line form.$submitted = true; when you use a submit button.
var app = angular.module('app', []);
app.controller('TestController', function($scope){
$scope.isFieldInvalid = function(field) {
var form = $scope.testForm;
return form[field].$invalid && (!form[field].$pristine || form.$submitted);
};
$scope.fetchResults = function(){
var form = $scope.testForm;
form.$submitted = true; // comment this line if button type="submit"
if(form.$valid){
$scope.searching = true;
$scope.results = [];
var rnd = Math.random();
if(rnd >= 0.5) {
$scope.results = [{id: 1}, {id: 2}];
}
//$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], });
$scope.buttonClicked = true;
$scope.searching = false;
}
};
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="testForm" ng-controller="TestController" ng-submit="fetchResults()" role="form" novalidate="">
<div class="form-group" ng-controller="TestController">
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" ng-model="radioption" ng-required="true"> MAIN 1</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" ng-required="true" >
Main 2</label>
<div ng-show="isFieldInvalid('sampleinlineradio')">Please select one.</div>
</div>
<div class="form-group">
<label ng-repeat="branch in branches">
<input type="checkbox" name="selectedBranches[]" value="{{branch.value}}"
ng-model="branch.selected" ng-required="isOptionsRequired()" >
{{branch.name}}</label>
<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div>
</div>
<input type="button" value="submit" ng-click="fetchResults()" >
<div ng-show="buttonClicked && !searching">
<table> <thead></thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="r in results">
<td>{{r.id}}</td></tbody></table>
</div>
<div ng-show="buttonClicked && !searching">
<span ng-show="results.length==0 ">No results.</span>
</div>
</form>
Hi I have created a pop up window containing a form asking the user to enter email and password.And there is a log in button.Usually in most of the forms, after entering all details and pressing 'enter', the submit button will be automatically clicked.But in this case,only when I click the login button it works.I want it to work on pressing 'enter' in keyboard.I know that this is a simple question.But I can't figure it out why is this happening.Please help me
Here is my userinfo.html(pop up window)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
<form id="userinfo">
<label for="user"> Email : </label>
<input type="text" id="user" /><span id="semail"></span>
<br><br>
<label for="pass">Password : </label>
<input type="password" id="pass" />
<br>
<br>
<input type="button" id="login" value="Log In"/>
</form>
</body>
</html>
Here is my test.js
window.addEventListener('DOMContentLoaded', function() {
var user = document.querySelector('input#user');
var pwd = document.querySelector('input#pass');
var login = document.querySelector('input#login');
login.addEventListener('click', function() {
var userStr = user.value;
var pwdStr = pwd.value;
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.login(userStr,pwdStr); });
window.close();
});
});
In order for a submit event to be triggered on ENTER the form must have a submit button.
In your particular case, you need to revent the default behaviour of your form, since you want to handle it "manually" using the background-page.
In summary, the following steps are required:
Change the button type from button to submit.
Register a listener for the form's submit event. (Note: this will be triggered on both button-click and ENTER.)
Prevent the default behaviour on form-submit.
Delegate the login-handling to the background-page (through its login method.
Here is the new code:
test.html
<h4>Enter your Email ID and Password</h4>
<form id="userinfo">
<label for="user">E-mail: </label>
<input type="text" id="user" required />
<br />
<label for="pass">Password: </label>
<input type="password" id="pass" required />
<br />
<br />
<input type="submit" id="login" value="Log In" />
</form>
test.js
window.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('form#userinfo');
var user = document.querySelector('input#user');
var pass = document.querySelector('input#pass');
/* Register a listener on the form's `submit` event */
form.addEventListener('submit', function (evt) {
/* Prevent the event from being handled by the browser */
evt.preventDefault();
var userStr = user.value;
var passStr = pass.value;
/* Delegate login-handling to background-page */
chrome.runtime.getBackgroundPage(function (bgPage) {
bgPage.login(userStr, passStr);
});
window.close();
});
});
See, also, this short demo.
I need help with my HTML styling.
here is the HTML code:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = '';" size="25"/>
As you can see, all the elements that are inside <div></div> will be displayed upon clicking button1 (they are hidden initially).
What I want is that when button1 is clicked in addition to all the other fields (including button2) being displayed, button1 to be hidden.
How can I do this?
Change
onclick="document.getElementById('hidden').style.display = '';"
to
onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'"
You can see this in action here: http://jsfiddle.net/nayish/sJ5RR/.
instead of '' change it to 'Block'
so:
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = 'Block';" size="25"/>
But the best way will be to externalize your script so you can do more stuff without cluttering your html
var btn = document.getElementById('button1');
btn.onclick = function () {
// all the stuff you want to do
document.getElementById('hidden').style.display = "block";
this.style.display = "none";
... more stuff ...
}