Using checkbox how to hide and show the span.
If checkbox is checked on the span should be dispaly, if uncheck it should not be display using angular
Here is a fiddle:http://jsfiddle.net/d9uc1dxc/2/
<div class="flw vreq2">
<label>Voting require2</label>
<div class="oneline">
<div class="onoffswitches">
<input type="checkbox" name="onoffswitch" class="onoffswitch-
checkbox"id="myonoffswitch7"/>
<label class="onoffswitch-label" for="myonoffswitch7">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<span class="teamsize">
<label>Team Size</label><input type="text" />
</span>
</div>
</div>
Use like this:
<input type="checkbox" ng-model="val" ng-true-value="true" ng-false-value="false"/>
<span ng-show="val">hello world</span>
you can use ng-show or ng-hide in the span tag.
https://docs.angularjs.org/api/ng/directive/ngShow
Your fiddle example shows that you have not even bootstrapped AngularJs. Are you sure you selected a correct Tag? And you want to solve this issue in AngularJs?
If yes, the I would suggest you first go through the basics of AngularJs.
And here is an answer to your question.
your html must look like
<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 data-require="angular.js#1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="checkbox" ng-model="checkBoxValue" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch7"/>
<label class="onoffswitch-label" for="myonoffswitch7">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<div ng-hide="checkBoxValue">
<span class="teamsize">
<label>Team Size</label><input type="text" />
</span>
</div>
</body>
</html>
Refer: http://plnkr.co/edit/sc2xRQCYOi22D9AYqCrX?p=preview
I found the best answer
<input type="checkbox" name="onoffswitch" class="onoffswitch-
checkbox"id="myonoffswitch7" ng-model="checked" />
<span class="teamsize" ng-hide="checked">
<label>Team Size</label><input type="text" />
</span>
Related
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
I want to uncheck the two checkbox on startup, and allow user to select only one check box at a time. Can I do it only using from ng-... attribute?
I am trying the following code
<div style="border:1px solid">
<label><input type="checkbox" ng-checked="!Titleshine_check" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-checked="!blink_check" ng-model="Titleshine_check">Shine</label>
<br>
</div>
http://plnkr.co/edit/2BLssmNTB5r8LjeGZf65?p=preview
Here you got full example
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="border:1px solid">
select type:
<form>
<input type="radio" name="opt1" ng-change="radioValue" ng-model="radioValue" value="this" unchecked> this
<br>
<input type="radio" name="opt2" ng-change="radioValue" ng-model="radioValue" value="that" unchecked> that
</form>
<span ng-bind="radioValue"></span>
</div>
</body>
</html>
and js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.radioValue="empty";
});
If you really, really want the checkboxes you can do it like this:
http://plnkr.co/edit/ukDKjBZsp7AtY5UiIhBj?p=preview
<div style="border:1px solid">
<label><input type="checkbox" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-click="blink_check = !blink_check" ng-model="!blink_check" >Shine</label>
<br>
</div>
I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.
Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});
just do following changes
$scope.Click = function()
{
//your logic
}
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/