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>
Related
That is how I have a checkbox and it must be such that when for example, I click on my button, so it must be like to know that there must be more than one of them. So it must have more value in total.
As it is right now gives no error or success message in my console.log ().
<input type="checkbox"
ng-checked="ItemSelected"
name="SelectedTypes"
value="2" />
<input type="checkbox"
ng-checked="ItemSelected"
name="SelectedTypes"
value="3" />
<input type="checkbox"
ng-checked="ItemSelected"
name="SelectedTypes"
value="4" />
<input type="button" class="btn btn-success" value="Næste" ng-click="UppersViewClick()" />
CreateUserInfo.js - File
$scope.UppersViewClick = function ()
{
if ($scope.ItemSelected !== undefined)
{
if ($scope.ItemSelected.length > 1) {
$scope.UppersViewInfo = false;
$scope.PantsViewInfo = true;
console.log("succes")
}
else
{
console.log("error");
}
}
}
So the purpose it is that I should be sure me that more than one or just a value out of it all.
You cannot get checked boxes like that since all refers to the same model,
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
DEMO
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
Show Selected
</div>
</body>
</html>
In the below code data is not binding between label value to input model..
if we click on div it will shows the value of children label in input model, where i tried to change label name, but two way binding is not happening between them..
DEMO
// Code goes here
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
$scope.selectedEvent.innerHTML = $scope.textVal;
angular.element(element.currentTarget).innerHTML = $scope.textVal;
};
});
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>
</html>
Updated HTML...
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
Update JS
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
// angular.elhement(element.currentTarget).innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});
Updated code here...
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
//angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
// $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});
HTML Updated...
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label >User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>
Use the angular ng-model
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.setText = function (element) {
$scope.textVal = 'click on User Name';
$scope.changedVal = '';
};
$scope.changeLabelText = function () {
$scope.changedVal = $scope.textVal;
};
});
html
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change user name here//
<div ng-click="setText()">
<label>User Name</label><br/>
<input type="text" placeholder="enter username" value="{{changedVal}}">
</div>
</body>
</html>
If you want to update the label
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'User Name';
$scope.setText = function (element) {
$scope.textVal = 'User Name';
};
});
html
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change label here//
<div ng-click="setText()">
<i>Click here to reset</i><br/>
<label>{{textVal}}</label><br/>
<input type="text" placeholder="enter {{textVal}}" value="">
</div>
</body>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [1,2,3,4];
$scope.results = {};
$scope.showButton = function () {
for (var key in $scope.results) {
if ($scope.results[key]) {
return true;
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!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.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input value="{{d}}" type="checkbox"/>
check this to check all checkbox and show the button
<br><br>
<li ng-repeat="d in data"><input ng-model="results[$index]" value="{{d}}" type="checkbox"/>{{$index}}</li>
<button ng-show="showButton()">Submit</button>
</body>
</html>
My code above bind each of the checkbox and show the save button if any of them got checked, but now I having problem implementing the main checkbox, which will check all of the checkbox and show the button.
http://plnkr.co/edit/goVQtYxjgo8fA15oSGuy?p=preview
Check working demo: Plunker.
Add a new checkbox:
<input type="checkbox" ng-change="toggleCheckAll()" ng-model="allChecked" />
check this to check all checkbox and show the button
Everytime you check/uncheck this chechbox, the function toggleCheckall will be invoked. In the controller:
$scope.allChecked = false;
$scope.toggleCheckAll = function () {
for (var key in $scope.results) {
$scope.results[key] = $scope.allChecked;
}
};
<input type="button" class="button" value="click"/><div class="text_block">start</div>
In jquery this code is right for me:
$(".button").click(function() {
if($(this).val() == "click"){
$(this).val('clicked');
$(".text_block").html("stop");
}
else if($(this).val() == "clicked"){
$(this).val('click');
$(".text_block").html("start");
}
});
And how can I do this right using angular js?
AngularJs code sample
Use angular watch DEMO
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Click' : 'Cliked';
$scope.divText = $scope.toggle ? 'Start' : 'Stop';
})
})
HTML code sample
<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" >{{divText}}</div>
You actually don't need a bit of javascript. You can do it in plain angular HTML code:
<input type="button" class="button" ng-model="toggle" ng-click="toggle = !toggle" value="{{toggle ? 'clicked' : 'click'}}" />
<div class="text_block">{{toggle ? 'Stop' : 'Start'}}</div>
Just create two local variable inside the scope and change their value according to the current value of clicked button.
Like :-
<body ng-controller="hello">
<input type="button" class="button" ng-click="click()" value="{{myvalue}}"/><div class="text_block">{{value}}</div>
<script>
var app=angular.module('app',[ ]);
app.controller("hello",function($scope){
$scope.value="STOP";//default value
$scope.myvalue="click";
$scope.click=function(){
if($scope.myvalue=="click"){
$scope.myvalue="clicked";
$scope.value="START";
}else{
$scope.myvalue="click";
$scope.value="STOP";
}
}
});
</script>
</body>
Here is the plunker:-
http://plnkr.co/edit/QsW1zzQF4BdslMwMFPxU?p=preview
live demo: http://plnkr.co/edit/zflkeo
<!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.3.x" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
</head>
<body ng-controller="MainCtrl">
<button type="button" ng-click="theAngularWay()">{{btnState}}</button>
<div class="text_block">{{textBlock}}</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.btnState = 'clicked';
$scope.textBlock = 'start';
$scope.theAngularWay = function() {
if($scope.textBlock === 'start') {
$scope.btnState = 'clicked';
$scope.textBlock = 'stop';
} else {
$scope.btnState = 'click';
$scope.textBlock = 'start';
}
}
});
</script
</html>
see
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="MyController">
<input type="button" class="button" value="{{Start}}" ng-click="showMessage()" /> <div class="text_block">{{message}}</div>
</div>
<script>
function MyController($scope) {
$scope.Start = "click";
$scope.message = "";
$scope.showMessage = function () {
if ($scope.Start == "click") {
$scope.Start = "clicked";
$scope.message = "stop";
}
else {
$scope.Start = "click";
$scope.message = "start";
}
}
}
</script>
</body>
</html>
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;
}