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>
Related
I find a checkbox function from the web as below, how to remove checkbox if click Uncheck, maybe need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
Here i can able to print family details but can't members details. Inside select drop down member details are displaying.
<form class="form-horizontal" ng-app="myApp" ng-controller="myCtrl">
<div class="form-group" >
<label class="control-label">Family : </label>
<select class="form-control " ng-model="family"
ng-options="o as o.familyName for o in list">
</select>
</div>
<div class="form-group" ng-if="family" >
<label class="control-label">Head of family : </label>
<select class="form-control" ng-model="familyHead"
ng-options="p as p.name for p in family.members" >
</select>
</div>
Family : {{family}} <br> Head : {{familyHead}}
</form>
first of all your form is not closed properly and your assigning object to model and trying to print that object after the select close.
so i added a change event for select box and passed that object to the function and then fetch the required field to the print statement as below
<!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 data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<form class="form-horizontal" >
<div class="form-group" >
<label class="control-label">Family : </label>
<select class="form-control " ng-model="family"
ng-options="o as o.familyName for o in list"> </select>
</div>
<div class="form-group" ng-if="family" >
<label class="control-label">Head of family : </label>
<select ng-change="s(familyHead)" class="form-control" ng-model="familyHead"
ng-options="p as p.name for p in family.members" >
</select>
</div>
Head : {{head}}
</form>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.list = [
{
familyName:'Joy',
members:[
{relation:'father', name:'Amd Joy'},
{relation:'mother', name:'menna Joy'},
{relation:'child', name:'Kevin Joy'}
]} ,
{
familyName:'Snow',
members:[
{relation:'father', name:'Jhon Snow'},
{relation:'mother', name:'eva Snow'},
{relation:'child', name:'Kevin Snow'}]
}
];
$scope.s=function(x){
console.log(x);
$scope.head=x.name;
};
});
</script>
</html>
Please refer the jsfiddle url Demo
[1]: https://jsfiddle.net/Ly5s70ce/
I am looking for something like this:
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="{'stuff': stuff};stuff1">Stuff!!!</div>
However this doesn't work
You can achieve what you want by two ways:
Using the array notation of ngClass:
<div ng-class="[{'stuff': stuff}, stuff1]">Test</div>
Separating class and ngClassdirective, as below:
<div class="{{stuff1}}" ng-class="{'stuff': stuff}">Stuff!!!</div>
Take a look:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="[{'text-success': stuff}, stuff1]">Stuff1!!!</div>
<div class="{{stuff1}}" ng-class="{'text-danger': stuff}">Stuff2!!!</div>
</body>
</html>
In the below snippet, I'm not able to print a simple value of search_username.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div ng-controller="MainController">
{{userdata.name}} {{error}}
</div>
</body>
</html>
JS Code:
// Code goes here
var MainController = function($scope, $http) {
$scope.search_username = "anyname"; // Value assigned here
var onComplete = function(response) {
$scope.userdata = response.data;
}
var onError = function(reason) {
$scope.error = "Not able to fetch data";
}
var request = $http.get("https://api.github.com/users/angular");
request.then(onComplete, onError);
}
var myModule = angular.module("GibtHubViewer", []);
myModule.controller("MainController", ["$scope", "$http", MainController]);
Thank You
your model out of scope. you should put all model in scope that define it by controller.
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div >
{{userdata.name}} {{error}}
</div>
</body>
The position where you are trying to print the model is out of Scope of the controller which is used, try this:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div>
{{userdata.name}} {{error}}
</div>
</body>
</html>
you are trying to display the {{search_username}} outside the controller area.
the search_username is added in the scope in MainController but you are trying to print that outside the MainController's area.
<div ng-controller="MainController">
{{userdata.name}} {{error}}
search_username - {{search_username}} // This will print the username
</div>
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>