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/
Related
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 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 ?
I am trying to use the angular form validations in my form for a blog post, and more specifically a ng-disabled form. For reasons I cannot figure out the submit button is not disabled, where as it should be unless all three input fields are valid. Thanks for the help.
this is my blog template
<div ng-controller='BlgoCtrl'>
<div class='container'>
<h1> Teewinot Blgo</h1>
<div class="row">
<div class='col-md-12'>
<form role='form' name='blgoPost' novalidate>
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' placeholder='Technologies of the Future' required><br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required></textarea><br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" class='form-control' placeholder='•••••••••••••••' required><br>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
</div>
</div>
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teewinot</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular-route/angular-route.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-app="Teewinot">
<ng-include src="'app/templates/partials/navbar.html'"></ng-include>
<ng-view></ng-view>
<!-- angular module defintion and reoutes -->
<script src="app/js/app.js"></script>
<script src="app/js/routes.js"></script>
<!-- controllers -->
<script src="app/js/controllers/blog.controller.js"></script>
</body>
</html>
This is my blog controller
angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
'use strict'
});
You're missing ng-model on every field of your form. Keep in mind when you mention ng-model on any form field at that time ng-model creates the extra objects inside form name object with that specific name attribute which then considered while form validation like $error, $valid, $invalid, etc.
As your form name is blgoPost, when angular compile this page,it internally creates the object inside the scope of the name of blgoPost. And the all the input fields which has name & ng-model assign to them gets added inside that blgoPost object. But if you don't mention ng-model to the form fields then it will never get added inside the blgoPost form object.
HTML
<form role='form' name='blgoPost' novalidate="">
<input name="first" />
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
<br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
<br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='•••' required="" />
<br/>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
Working Fiddle
How can I validate my form by click a button. Validation must be disabled when user typing into fields and must be enabled only when click button. How can I do this?
var app = angular.module("App",[]);
app.controller("Controller", function($scope){
$scope.Validate = function(){
if($scope.frm.$invalid){
alert("Form is invalid");
}
else{
alert("Form is valid");
}
};
});
input.ng-invalid:not(.has-focus) {
border:1px solid #ff7f7f;
background-color: #ffeeee;
}
<html ng-app="App">
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="Controller">
<form name="frm">
<input type="text" ng-model="user.name" required/>
<input type="email" ng-model="user.email" required>
</form>
<a class="btn btn-info" ng-click="Validate()">Validate! </a>
</div>
</body>
</html>
required tag is from HTML5/browser validation, is not good practice use them, move all your validation to angularjs
so, to disable all browser validation (using novalidate tag)
<form name="frm" novalidate>
<input type="text" ng-model="user.name" />
<input type="email" ng-model="user.email" />
</form>
<a class="btn btn-info" ng-click="Validate()">Validate! </a>
I am all for the simplest answers possible. Why not just hide the validate button until you want them to see it?
What about ng-hide until all the fields have information, and then an ng-show once those conditions are met. Then you can do the ng-click statement that will validate the form?
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