I have the following AngularJS code and I want to be able to total the calculated fields that appear in the results1 and results2 disabled inputs. Can someone advise how this is done?
Thanks,
John
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<form name="form" action="index.php" method="post" autocomplete="off">
<input type="text" name="field1" ng-model="field1" ng-init="field1='10'">
<input type="text" name="field2" ng-model="field2" ng-init="field2='10'">
<br>
<input type="text" name="results1" value="{{(+field1*100|currency)}}" disabled>
<input type="text" name="results2" value="{{(+field2*100|currency)}}" disabled>
</form>
<h1>{{(+results1--results2|currency:"")}}</h1>
</body>
</html>
Use ng-value instead of value to get that expression evaluated properly
<h1>{{(+field1--field2|currency:"")}}</h1>
<h1>{{(+field1*100--field2*100|currency:"")}}</h1>
Can you try like this ?
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>
I'm working with an input field with type="number" and I specifically want to use ng-min="0". I'm unsure what I'm doing wrong, but I don't see any message when I enter a value below zero into my field with my current implementation.
I did make sure to include angular messages like so: angular.module('myApp', ['ngMessages']).
My code:
<admin-form name="formName">
<admin-field>
<input
name="formName"
ng-model="$ctrl.model.whatever"
type="number"
min="0" />
<div ng-messages="userForm.formName.$error" style="color: maroon" role="alert">
<ng-message when="min">Value cannot be below 0</ng-message>
</div>
A working plunkr is available here: https://plnkr.co/edit/PUT7r1hNbJrjHDF0vhJd
The PLNKR used obsolete libraries. With updated libraries, it works:
angular.module('myapp', ['ngMessages'])
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
<body ng-app="myapp">
<form name="myForm">
<label>Enter your number:</label><br>
<input type="number" name="myNumber" ng-model="num"
ng-min="0" role="alert">
<div ng-messages="myForm.myNumber.$error" style="color:red">
<div ng-message="min">Your field value is lesser minimum value</div>
</div>
</form>
</body>
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>
Is it possible in Angular to validate a single, isolated <input> in a similar way the forms are validated? I'm thinking about something like this:
<div class="form-group">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myInput.$error.maxlength">Too long!</span>
</div>
The example above doesn't work. Enclosing it in a <form> and replacing ng-show with ng-show="myForm.myInput.$error.maxlength" helps.
Is it possible to do this without using <form>?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example
Building on Silvio Lucas' answer, if you are iterating in a loop and need to be able to interpolate form names and valid states:
<div
name="{{propertyName}}"
ng-form=""
class="property-edit-view"
ng-class="{
'has-error': {{propertyName}}.editBox.$invalid,
'has-success':
{{propertyName}}.editBox.$valid &&
{{propertyName}}.editBox.$dirty &&
propertyValue.length !== 0
}"
ng-switch="schema.type">
<input
name="editBox"
ng-switch-when="int"
type="number"
ng-model="propertyValue"
ng-pattern="/^[0-9]+$/"
class="form-control">
<input
name="editBox"
ng-switch-default=""
type="text"
ng-model="propertyValue"
class="form-control">
<span class="property-type" ng-bind="schema.type"></span>
</div>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
</head>
<body ng-controller="MainCtrl">
<div class="help-block error" ng-show="test.field.$error.required">Required</div>
<div class="help-block error" ng-show="test.firstName.$error.required">Name Required</div>
<p>Hello {{name}}!</p>
<div ng-form="test" id="test">
<input type="text" name="firstName" ng-model="firstName" required> First name <br/>
<input id="field" name="field" required ng-model="field2" type="text"/>
</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.field = "name";
$scope.firstName = "FirstName";
$scope.execute = function() {
alert('Executed!');
}
});
</script>
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/