Running this code by clicking checkbox returns true or false for {{isHidden}} as expected. But when the code is run for the very first time {{isHidden}} appear to be blank. How to fix this?
<!DOCTYPE html>
<html data-ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
Hidden: <input type="checkbox" ng-model="isHidden">{{isHidden}}
<script type="text/javascript" src="js/angular.js"></script>
</body>
</html>
use ng-init directive
<input type="checkbox" ng-model="isHidden" ng-init="isHidden= true">{{isHidden}}
use true or false in ng-init it will initialize the values on a scope
here is the working plunker
Related
if i have this code:
<div><input type="checkbox" name="lista[]" value="3424"> 3424<br><input type="checkbox" name="lista[]" value="3333"> 3333<br></div>
I would like to have the checkbox value in the variable $valore without using any submit button
help me?
I'm very new with this. But it seems your case is similar to the one that I've found somewhere on the internet. Too bad, I don't remember that internet address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery.js"></script>
<style>
</style>
</head>
<body>
<div>
<input class="calc" type="checkbox" name="lista[]" value="3424"> 3424<br>
<input class="calc" type="checkbox" name="lista[]" value="3333"> 3333<br>
</div>
<input type="text" name="sum"/>
<script>
function calcscore(){
var valore = 0;
$(".calc:checked").each(function(){
valore=parseInt($(this).val(),10);
});
$("input[name=sum]").val(valore.toLocaleString())
//alert(valore)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
</body>
</html>
Test Link in jsfiddle.net.
I don't understand at all the code because I just copied it from the internet, then I try to modify it with more miss than hit.
The original code is to sum the value of the checked checkbox, so it put plus (+) sign in this line : valore+=parseInt($(this).val(),10);
This is a very basic ng-click example. I can't seem to get it to work. Not sure what the issue is. I swear I've used Angular before! Here's a jsbin:
JS Bin
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>{{1 + 2}}</h1>
<button ng-click="alert('hello world')">Click me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Module:
angular.module('app', []);
It will be helpful to you while doing angularjs you should add the controller, In your case, I have created a function and passed a string value to show a message by the alert.
var app=angular.module('app', []);
app.controller('testCtrl',function($scope){
$scope.showalert=function(str){
alert(str);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-strict-di ng-controller="testCtrl">
<h1>{{1 + 2}}</h1>
<button ng-click="showalert('hai this is angularjs click event')"> click Me!..</button>
</div>
I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?
Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});
Consider the following code - it uses ng-bind to print the 2 models in an expression defined at the element level.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example16-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngBindHtmlExample">
<div ng-controller="ngBindHtmlCtrl">
<input type="text" ng-model='asd'/>
<input type="text" ng-model='asdasd'/><br>
<span ng-bind='asd +" "+ asdasd'> </span>
<p ng-bind-html="myHTML"></p>
</div>
</body>
</html>
now consider this code with ng-template which does exactly the same but only uses {{ }} in the expression
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example15-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
</head>
<body ng-app="">
<script>
function Ctrl($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}
</script>
<div ng-controller="Ctrl">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>
</body>
</html>
What is the key purpose of the 2 directives and best practices for their cases ?
The difference between the two has been neatly discussed here.
In short you can't use ng-bind to bind multiple values to a single html element. But you can use ng-bind-template to do that. Of course you can make ng-bind work like ng-bind-template as you have done in the question. The main difference being the execution of multiple expressions. Also ng-bind is faster and since there is rarely any need to use multiple expressions, using ng-bind would be preferable.
I have this code http://plnkr.co/edit/kiH0Ge?p=preview
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<choice-tree ng-model="myTree" children="true"></choice-tree>
<hr />
$scope.myTree = {{myTree | json}}
</body>
</html>
I've added parametr checkChildren
<choice-tree ng-model="myTree" checkChildren="true"></choice-tree>
Then in check directive I want to run function conditionally
if(scope.checkChildren === 'true')
checkChildren(choice);
But it doesn't work.
I know there is isolated scope, but how to build tree then.
Now everything works http://plnkr.co/edit/5lLGIQ?p=preview
I just changed children to withchildren and this (crucial)
$compile('<choice-tree ng-model="choice.children" children="{{children}}"></choice-tree>')(scope);
to
$compile('<choice-tree ng-model="choice.children" withchildren="'+scope.withchildren+'"></choice-tree>')(scope);
http://plnkr.co/edit/5lLGIQ?p=preview
If my understanding is correct, I think it is a simple typo.
With a little modification, it seems to be working: http://plnkr.co/edit/BJqsl3
You want to check bool value, e.g. scope.checkChildren === true not against 'true'
[edit] It seems I did not understand the spec correctly
If I remove the if statement which I pointed out above, and call
checkChildren(), it works.
Is this what you intend?
Plunk is updated accordingly.