I have a list of checkboxes... when any of them are checked I want them to print in the area where I use the {{}}... If it is not checked then I want there to be no visual sign that there is anything there... see my sandbox here http://plnkr.co/edit/lvkdCmg7dQabuRKsBT5A?p=preview
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS Multiple Checkboxes</title>
<style>
label {display: block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>
<body>
<div class="col-sm-7">
<input type="checkbox" ng-model="fali">
fa-li
<br>
<input type="checkbox" ng-model="falg">
fa-lg
<br>
<input type="checkbox" ng-model="fa2x">
fa-2x
<br>
<input type="checkbox" ng-model="fa3x">
fa-3x
<br>
<input type="checkbox" ng-model="fa4x">
fa-4x
<br>
<input type="checkbox" ng-model="fa5x">
fa-5x
<br>
<input type="checkbox" ng-model="spin">
fa-spin
</div>
<div class="col sm-4">
<xmp class="prettyprint">
<i class="fa {{fali}} {{falg}} {{fa2x}} {{fa3x}} {{fa4x}} {{fa5x}} {{spin}}"></i>
</xmp>
</div>
<script>
</script>
</body>
</html>
It works currently but it shows true/false instead of the value and it has a space in the string for non checked items
Use ng-true-value and ng-false-value to specify the value you want. Otherwise the value is true or false.
<input type="checkbox" ng-true-value="fa-li" ng-false-value="" ng-model="fali">
fa-li
Updated plnkr: http://plnkr.co/edit/8BxnlsrvIhPmrGup7UaV?p=preview
Use ng-true-value="your value" and ng-false-value="your value" on your checkbox elements to give values aside from true and false to checkboxes. To show the text initially, set your models to false.
Plunkr: http://plnkr.co/edit/V4IA9uUS4feDXcXC4BMk?p=preview
Related
I want to make bootstrap switch by default on and read-only in angularJS.
This is my code:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
ng-checked="data.sla_enabled">
I use ng-readonly but It will not work.
You need to keep checkbox disabled and checked. As shown below:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
checked="checked"
disabled="disabled">
I think you need to use ng-disabled directive for checkboxes and not ng-readonly.
Here is an example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<label>Check me to make checkbox readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-disabled="checked" />
</div>
</body>
</html>
More info you can find here:
As mentioned by Rajmond use ng-disabled, just added a checked property to keep it ON by default.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" checked ng-disabled="true"/>
</div>
</body>
</html>
In my project I am facing an issue that ng-if is not working. I want to remove/add text field when value of $scope.edit changes.
I have created a simplest of example in the jsfiddle below.
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.name = "Johny";
}
http://jsfiddle.net/U3pVM/32009/
Your Fiddle may not work because you are using Angular 1.0.1 which has some issue in ng-if.
Solution 1
If you are really using this version, you can replace ng-if by ng-show (which will create hidden elements in the DOM).
<div ng-show="edit">
Demo on JSFiddle using ng-show
Solution 2
Anyway, the best solution would be to use Angular 1.2+ which fixes ng-if bugs in ng-repeat. As you can see in the following snippet, I didn't change your code, and it works.
Demo on JSFiddle using ng-if
Some observations :
Seems that your angular version is old. hence, ng-if is not working.
If you want to use only existing angular version then you can use ng-show instead of ng-if.
Demo with ng-if :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Demo with ng-show :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Use ng-show instead
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
DEMO
Update the angular version with 1.2 or above with ng-if
angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
$scope.name = "Johny";
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</body>
</html>
I've been studying angular for three days now, and I came across a little challenge but I'm still clueless how to do solve it with Angular.js, I've searched for it, but it's really hard to explain what I'm trying to accomplish.
I want to detect which checkboxes were checked and then show the number input into the inputs that their checkboxes were checked.
Here's a drawing (pardon me for my sh*tty explanation):
[X] |3_____________|
[_] |4_____________|
[X] |10____________|
[X] |4_____________|
[X] |1_____________|
3,,10,4,1
My code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>jQueryForm</title>
</head>
<body ng-app="">
<div id="form">
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data1" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data2" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data3" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data4" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data5" />
<br/>
<div id="data">{{data1 +","+ data2 +","+ data3 +","+ data4 +","+ data5}}</div>
</div>
</body>
</html>
If I understand you correctly, you want to hide those numbers in the <div id="data"> that don't have a checked checkbox. For this, your checkboxes need an ng-model as well:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>jQueryForm</title>
</head>
<body ng-app="">
<div id="form" ng-init="dataSet = [{},{},{},{},{}]">
<div ng-repeat="data in dataSet">
<input type="checkbox" ng-model="data.checked"/>
<label>Data:</label>
<input type="number" ng-model="data.number" />
<br/>
</div>
<span ng-repeat="data in dataSet">
<span ng-if="data.checked">{{data.number}}</span>
<span ng-if="!$last">,</span>
</span>
</body>
</html>
Now, I did quite a lot of things here. First, I assumed you want the solution to work for more than 5 elements. That's what the ng-init is for. It initializes the scope variable dataSet as an array of 5 objects. Of course, this should come from a controller, but to keep it to HTML here, I used ng-init.
Secondly, I used ng-repeat to iterate over the objects in dataSet and repeatedly create DOM objects.
Next, I gave the checkbox an ng-model (namely data.checked), which corresponds to dataSet[$index].checked.
Last, but not least, the output is handled in an ng-repeat as well - to keep it adjustable to the size of dataSet. $last is a special variable within an ng-repeat scope that is true if it's the last element.
The below code is just to give you an idea of how it works. You can extend this idea. It's the ng-if that you have to use. ng-if documentation here.
<div id="form">
<input type="checkbox" ng-model="check1" />
<label>Data:</label>
<input type="number" ng-model="data1" />
<span ng-if="check1">{{data1}}</span>
</div>
There are multiple ways to deal with this. The basic idea is you have to provide the link between check box and the input field. It needs a way to show/hide input field based on checked item.
Check this plunk here
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.dataModel={};
$scope.checkboxOptions = {
data1: true,
data2: true,
data3: true,
data4: true,
data5: true,
};
//or
// $scope.checkboxOptions ={}; //this will generate falsey statement for checkboxOptions.data1
}]);
</script>
<div id="form" ng-controller="ExampleController">
<input type="checkbox" ng-model="checkboxOptions.data1" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data1" ng-model="dataModel.data1" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data2" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data2" ng-model="dataModel.data2" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data3" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data3" ng-model="dataModel.data3" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data4" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data4" ng-model="dataModel.data4" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data5" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data5" ng-model="dataModel.data5" />
<br/>
<div id="data">{{dataModel.data1 +","+ dataModel.data2 +","+ dataModel.data3 +","+ dataModel.data4 +","+ dataModel.data5}}</div>
</div>
</body>
a calculator that add value from two textbox using Add button display result in another textbox in html
<ion-content>
<div class="tbox">
<label>
<input type="number" placeholder="Number 1" ng-model="N1">
</label>
<label>
<input type="number" placeholder="Number 2" ng-model="N2">
</label>
<label>
<input type="number" placeholder="Result" ng-model="R">
</label>
</div>
<label>
<button class="button button-block button-positive"> Add </button>
</label>
</ion-content>
user input from textbox should be added up when add button is been pressed i dont know how to develop it in angularjs
You are not assigning a+b to result variable.Assign to result variable and you will get your expected result.Example on plnkr
Add button in your template and bind click event. On click event just assign your a+b in result variable.
I think you are looking something like this.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<p>
First Number:<input type="number" ng-model="a" />
</p>
<p>
Second Number: <input type="number" ng-model="b" />
</p>
<p>
Result : <input type="number" ng-model="result" />
</p>
<input type="button" value="Add" ng-click="add()">
<p>
Sum: {{ a + b }}
</p>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.add = function(){
$scope.result = $scope.a + $scope.b;
};
});
</script>
</html>
Just try this
<input type="number" value="{{a+b}}" />
<p >
Sum: <span ng-bind="a+b"></span>
</p>
I'm trying to make two inputs inline after clicking the checkbox, so if the Inline checkbox is clicked, those two inputs will sit in one line. Any ideas?
Before click "Inline" checkbox:
Question Inline
Enter text...
After click "Inline" checkbox:
Question Enter text... Inline
<!doctype html>
<html ng-app>
<head>
<title>Angular - My Notes</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
<h1>My Notes</h1>
<div class="note-section">
<input type="text" placeholder="Question">
<input type="checkbox" name="check" value="inline"> Inline <br>
<input type="text" placeholder="enter text...">
</div>
</body>
</html>
You could just put an ng-hide on the br like this:
<div ng-app>
<input type="text" placeholder="Question">
<input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline
<br ng-hide="inlineChecked">
<input type="text" placeholder="enter text...">
</div>
JSFiddle: http://jsfiddle.net/robianmcd/CMXcc/
Another solution would be to do this with a css class:
<div ng-app>
<input type="text" placeholder="Question">
<input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline
<input ng-class="{'blockInput': !inlineChecked}" type="text" placeholder="enter text...">
</div>
JSFiddle: http://jsfiddle.net/robianmcd/gPy45/