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;
}
};
Related
I want to be able to reference a variable in an Angular template that is built up on another variable with a filter.
So for example, I might have this in the controller:
$scope.EuropaLeague = true;
If I do this in the template it works as expected:
<div ng-if="EuropaLeague">
</div>
But what if I wanted to dynamically populate the ng-if with something coming from an ng-repeat e.g.
{{item.leagueName | myFilter}}
So the above would reference my scope variable $scope.EuropaLeague E.g. True or False?
Thanks
Here is working code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.leagues =
[
{
"id": 1,
"name": "ChampionsLeague",
},
{
"id": 2,
"name": "EuropaLeague",
},
{
"id": 3,
"name": "FACup",
}
]
$scope.obj = {};
$scope.obj['EuropaLeague'] = false;
$scope.obj['FACup'] = false;
$scope.obj['ChampionsLeague'] = 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.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="item in leagues" ng-if="item.name">
<li ng-if="obj[item.name]">{{item.name}}</li>
</ul>
</body>
</html>
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 working on an app where I am facing this similar issue. I am dynamically creating select boxes based on API response. I dont understand how to bind these values in controller. Code for reference is
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>
Initialize an empty object selected = {}
Then, loop the select boxes using ng-repeat, and inside each select box, use ng-options to get the options for the select.
Now, for each selected value from every select, ng-model="selected[y]" pushes the current select value into selected object with the key of select tag.
So, after selecting all the selects, the selected object looks loke,
{"1":11,"2":10,"3":22,"4":22}
Please run the below Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]
$scope.selectedFunc = function(y)
{
alert($scope.selected[y])
}
});
</script>
</body>
</html>
Here is a working DEMO
use a select box with ng-change method and pass the model value to that change function like below.....so that you can access the selected item in js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array=[10,11,22,33];//assuem it as your db result
$scope.fix=function(val){
console.log(val);
}
});
<!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">
<select ng-model= "x" ng-options="x as x for x in array" ng-change="fix(x)"</select>
{{x}}
</body>
</html>
From this json array I need to build dynamic radio buttons with mobile numbers in angularjs:
challengeSelectInfo:
[
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"}
]
I tried ng-repeat and iterate over challengeSelectInfo but the issue that I'm facing is keys(mob_0,mob_1,mob_2) are different and I'm unable to generate dynamic radio buttons.
Any help is appreciated.
Thanks
You need to specify keys for your arrays :
$scope.newArr = [];
angular.forEach(challengeSelectInfo, function(val, key) {
/* do something for all key: value pairs */
$scope.newArr.push({id: key, value: val});
});
Then loop through newArr arrays and assign to radio button :
<input name="{{item.value}}" type="radio" ng-model="item.id" value="{{item.value}}">
made this simply for your understanding purpose hope you can achieve your requirement by using this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.challengeSelectInfo= [
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"} ];
});
<!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">
<div ng-repeat="(k,v) in challengeSelectInfo ">
<div ng-repeat="(x,y) in v">
<input type="radio" />{{y}}
</div>
</div>
</body>
</html>
Can you check this JSFIDDLE Example
var data = { "challengeSelectInfo" : [ {"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"}, {"mob_2" : "xxxxx1211"} ]}
$scope.radioGrp = (data['challengeSelectInfo'] || []).map(function(obj){
for(var i in obj){
return { 'value': i, 'name': obj[i] };
}
});
<input type="radio" ng-repeat="rb in radioGrp" ng-value="rb.value" ng-modal="radioValue" name="{{rb.name}}">
I have the following element:
{{ project.label }}
The idea of the ng-class is this: if the photo belongs to the project, the function belongsPhotoToProject returns true, so the selected-project class is set. Now, on click, after the function removeFromProject(project, $index, currentPhoto) is triggered, belongsPhotoToProject does not evaluate to true anymore, so I expect it to remove the class, however, this doesn't happen.
So my questions are: after the initial page load, on which page events does ng-click get triggered? If ng-click gets triggered only on page load, can I manually trigger it again on ng-click?
That should work as you described it. Here's a plnkr showing it:
http://plnkr.co/edit/V4R0EUwKK5TeH5wn7Y5N?p=preview
Are you getting any errors in your browser?
javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.project = {
hasPhotos: true,
label: "My Test Project"
};
$scope.removeFromProject = function(project, $index, currentPhoto) {
$scope.project.hasPhotos = false;
};
$scope.addToProject = function($index, currentPhoto) {
$scope.project.hasPhotos = true;
};
$scope.belongsPhotoToProject = function(project, $index, currentPhoto) {
return $scope.project.hasPhotos;
};
});
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 data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{ project.label }}
</body>
</html>
css:
.selected-project {
background-color: #ccf;
}