I have a checkbox.
Check -> call displayStuff();
Uncheck -> call hideStuff();
I tried something like that but it doesn't work:
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="myCheckbox ? displayStuff() : hideStuff()" />
Thanks for your help!
You could try something like this. Call a function and determine the value of 'mycheckbox'
function ctrl ($scope) {
function displayStuff(){
alert("display");
}
function hideStuff() {
alert("hide stuff");
}
$scope.checkClick = function(){
if($scope.mycheckbox== false)
hideStuff();
else
displayStuff();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="" ng-controller="ctrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="checkClick()" />
</body>
However, if all you are doing is hiding/displaying things, a better approach would be to simply wrap the elements you want to hide/display with an ng-show
So like..
<div ng-show="mycheckbox==true">
</div>
that way when the checkbox is clicked, it will automatically show the elements within the div, when it is unchecked, it will hide them.
You just have a typo in ng-model="myCheckbox".
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.displayStuff = function() {
$scope.text = 'displayStuff';
};
$scope.hideStuff = function() {
$scope.text = 'hideStuff';
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="myCheckbox" data-ng-change="myCheckbox ? displayStuff() : hideStuff()" />
<p>{{text}}</p>
</div>
try this: see plunker
<input type="checkbox" id="mycheckbox2" name="mycheckbox1" ng-true-value="YES" ng-false-value="NO" ng-model="mycheckbox" ng-change="mycheckbox=='YES' ? displayStuff() : hideStuff()" />
You could also have a toggle function taking the model value as input.
var myApp = angular.module('myApp', []);
myApp.controller('stuffCtrl', function($scope){
$scope.data = "Stuff is displayed";
$scope.toggle = function(condition){
if (condition) {
//do stuff
$scope.data = "Stuff is displayed";
}
else $scope.data = "Stuff is hidden";
//do stuff
}
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Angular</h1>
<div ng-controller="stuffCtrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="toggle(mycheckbox)" ng-init="mycheckbox=true"> Display stuff
<div>{{ data }}</div>
</div>
</body>
</html>
HTML:
<input type="checkbox" ng-change="checked()" ng-model="mycheckbox" />
Controller:
$scope.mycheckbox = false;
$scope.checked = function () {
if ($scope.mycheckbox)
$scope.hideStuff();
else
$scope.displayStuff();
}
$scope.displayStuff=function(){
alert("d");
$scope.mycheckbox=true;
}
$scope.hideStuff= function() {
alert("h");
$scope.mycheckbox=false;
}
Related
i am learning AngularJs, any help is much appreciated, trying to display the div content that is checked, if nothing checked the div with 'selected' class name should appear.
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func()">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func()">B
<div ng-if="selected">Hello from div container</div>
<div ng-if="aCheck">Hello from checkbox1</div>
<div ng-if="bCheck">Hello from checkbox2</div>
</body>
</html>
And the script
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected=true;
$scope.checkbox1Func=function(a){
$scope.selected=false;
};
$scope.checkbox2Func=function(b){
$scope.selected=false;
};
if($scope.aCheck === false && $scope.bCheck===false){
$scope.selected=true;
}
// $('.myCheckbox').click(function() {
// $(this).siblings('input:checkbox').prop('checked', false);
// });
});
Your existing logic will work if you check the if condition
if($scope.aCheck === false && $scope.bCheck===false){
$scope.selected=true;
}
inside both the functions checkbox1Func and checkbox2Func.
Wrap the check inside a function and call it on the ng-change event,
$scope.valid = function() {
if ($scope.aCheck === false && $scope.bCheck === false) {
$scope.selected = true;
}
}
HTML
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected = true;
$scope.checkbox1Func = function(a) {
$scope.selected = false;
};
$scope.checkbox2Func = function(b) {
$scope.selected = false;
};
$scope.valid = function() {
if ($scope.aCheck === false && $scope.bCheck === false) {
$scope.selected = true;
}
}
});
<!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="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B
<div ng-if="selected">Hello from div container</div>
<div ng-if="aCheck">Hello from checkbox1</div>
<div ng-if="bCheck">Hello from checkbox2</div>
</body>
</html>
I am refactoring some code and have a small issue. I am passing a count variable of the scope to a func and incrementing it but the original value is not updated. Here is a sample:
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
plunker: http://plnkr.co/edit/f6fle98TSmINuD6CCz3Q?p=preview
You can see the output in the console.
Can You offer me some solution?
My code
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var vm = this;
vm.counter = 0;
vm.change = function(counter) {
vm.counter++;
console.log(counter);
};
}]);
</script>
<div ng-controller="ExampleController as e">
{{e.counter}}
<input type="checkbox" ng-model="confirmed" ng-change="e.change(e.counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
Please instead of counter++ inside the change-function use $scope.counter++. The answer to your question why original value is not updated is that you are not updating the scope ($scope.counter) in your current code.
I think your problem is that you are mixing variables because its name. Maybe changing counter variable name can help you:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(variable) {
variable++;
console.log(variable);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
The right way is update $scope.counter value:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
$scope.counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
I hope this help!
A simplified version of the code:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.addressForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
which looks in the browser like this:
When I click "REMOVE" and then "NEXT" - javascript error is produced:
Error: $scope.addressMainForm.addressForm is undefined
Why is it undefined if there is clearly still one element remaining in the array? Everything otherwise works fine (console.log output), until all the elements are removed but the last one and "NEXT" is clicked.
When you call $scope.addressMainForm.addressForm.$valid , you are attempting to call check to see if the adressForm element is valid, but your remove function has removed the addresses entry associated with that element. So the form indeed still exists, but that call becomes illegal.
Try this:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
This jsFiddle explains it all
My code separates hashtags, e.g., #riots = <span class="hashtags">#riots</span> but it's being printed as plaintext instead of html. What am I doing wrong?
function formCtrl($scope){
$scope.$watch(function() {
$scope.description = "Wow, it's crazy over here! #baltimore #riots";
$scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
$scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>");
})
}
#description {
width: 300px;
height: 3em;
}
.hashtag {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<textarea ng-model="description" id="description"></textarea>
<br />
vidTags: {{vidTags}}
<br />
desc: {{desc}}
<br />
</div>
Here's a Plunker that shows a working example using $sce.
http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="formCtrl">
<textarea ng-model="description" id="description"></textarea>
<br />vidTags: {{vidTags}}
<br /><div ng-bind-html="desc"></div>
<br />
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function formCtrl($scope, $sce) {
$scope.$watch(function() {
$scope.description = "Wow, it's crazy over here! #baltimore #riots";
$scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '$1<span class="hashtag">$2</span>');
$scope.desc = $sce.trustAsHtml(message);
})
})
</script>
</body>
</html>
You now have to use $sce to run your output through a filter, which
you can specify to allow the HTML.
We can implement this using $sce.trustAsHtml() by adding a filter to
[the] code (outside of the controller). This custom filter will make
sure that [the] HTML doesn’t get filtered out by AngularJS 1.2/AngularJS
1.3 or later
Sources:
http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/
https://docs.angularjs.org/api/ng/service/$sce
Im basic developer , just wanted to pass hidden values from my html page in a json array . Following is my code :-
Index.html
<!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.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" novalidate>
<b> Text: </b>
<input ng-model="form.text" required /><br>
<button ng-click="submitForm()" bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp');
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
Now , the value from ng-model="form.text" successfully returns the result as for unhidden input types
{ "text":"What_ever_text" }
but how to send a defined value in array, consisting of hidden input type like :-
<input value="99999" type="hidden" ng-model="form.userid" required />
So , wanted desired output like :-
{ "text":"What_ever_text" , "userid":"99999" }
any solution ?
Note :- The input type should be hidden or any other easier method appreciated. Thanks in advance.
hidden input fields also works same as normal fields only.
see the below code
var app = angular.module('myApp', []);
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {
text: "some test",
userid: '12312312312'
};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" ng-submit="submitForm()" novalidate>Text:
<input ng-model="form.text" required />
<br/>
<input type="hidden" ng-model="form.userid" required />
<button bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</div>