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>
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 have angularjs front end code as follows:
function addController($scope, $http) {
$scope.tableNames = [];
$scope.addNewColumn = function(item) {
$scope.tableNames.push({})
}
}
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" />
TextBox2:<input type="text" ng-model="item.item2" /></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{tableNames|json}}</pre>
</body>
</html>
So when I enter text in the textbox1 and textbox2 it shows array of below format:
[{
"item1":"textbox1value",
"item2":"textbox2value"
}]
and also when i click addColname button and generate another textbox, values are pushed in different property as follows,it generates:
[{
"item1":"textbox1value",
"item2":"textbox2value"
},
{
"item1":"textbox1value",
"item2":"textbox2value"
}
]
but what actually i need is of structure,
[{
"textbox1value":"textbox2value",
"textbox1value":"textbox2value",
.....
}]
note(:"textboxvalue" are values entered inside textboxes.
somebody help me to get desired output. thanks in advance
This is a working code. I hope this helps :)
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script>
function addController($scope, $http) {
$scope.tableNames = [];
$scope.getData={};
var i=-1;
$scope.addNewColumn = function (item) {
$scope.tableNames.push({})
i++;
}
$scope.addData = function(item){
if(i >= 0){
$scope.newData=[];
$scope.getData[$scope.tableNames[i].item1]=$scope.tableNames[i].item2;
$scope.newData.push($scope.getData);
}
}
}
</script>
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" ng-keyup="addData()"/>
TextBox2:<input type="text" ng-model="item.item2" ng-keyup="addData()"/></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{newData|json}}</pre>
</body>
</html>
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;
}
};
I'm trying to build an array with ng-model,
<div ng-repeat="n in [1, 2, 3]">
<input type="text" class="form-control" ng-model="headers[$index].key">
<input type="text" class="form-control" ng-model="headers[$index].value">
</div>
When I do angular.toJson ($scope.headers), I got:
{
"headers": {
"0": {
"key": "xxx",
"value": "yyy"
}
}
}
But I wanted this,
{
"headers": [
{
"key": "xxx",
"value": "yyy"
}
]
}
Is it impossible to get that?
Is this what you mean?
DEMO
index.js
<!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.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="object in transformedData">
<input type="text" class="form-control" ng-model="object.key">
<input type="text" class="form-control" ng-model="object.value">
</div>
<pre>{{transformedData}}</pre>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var data = {
"headers": {
"0": {
"key": "xxx",
"value": "yyy"
}
}
};
$scope.transformedData = transformData(data.headers)
function transformData(data){
var arr = [];
for(var key in data){
arr.push(data[key])
}
return arr;
}
});
You just need to initialize your header as an array and ng-model assignments will work.
I have altered the plunker shared by #Matt, check it here
http://plnkr.co/edit/z6Cz6R3gZpDCsXSUmIEG?p=preview
my ng-table is being build like this
<table ng-table="storeCommandsTableParams" class="table tile">
<tr ng-repeat="storeCommand in $data">
<td>
<input type="checkbox" ng-change="vm.toggleCommandSelection(storeCommand)" ng-model="vm.selectedCommands" >
</td>
</tr>
</table>
and i have controller setup like this.
var vm = this;
vm.selectedCommands = { };
vm.toggleCommandSelection = function (storeCommand) {
var idx = vm.selectedCommands.indexOf(storeCommand);
// is currently selected
if (idx > -1) {
vm.selectedCommands.splice(idx, 1);
}
// is newly selected
else {
vm.selectedCommands.push(storeCommand);
}
};
what i am trying to accomplish is that when ever user clicks a check-box the respective storeCommand should be sent to a function vm.toggleCommandSelection so that i could have list of storeCommands selected. but this function is not fired.
Plunker
Your model is not storeCommand but vm.selectedCommands. So ng-change won't be triggered in this case when you click on the checkbox. May be you can use ng-click instead.
Try this
<input type="checkbox" ng-click="vm.toggleCommandSelection($event, storeCommand)">
var vm = this;
vm.selectedCommands = [];
vm.toggleCommandSelection = function ($event, storeCommand) {
var idx = vm.selectedCommands.indexOf(storeCommand);
if ($event.target.checked) {
if (idx === -1) {
vm.selectedCommands.push(storeCommand);
}
}
else {
if (idx > -1) {
vm.selectedCommands.splice(idx, 1);
}
}
};
Demo
http://plnkr.co/edit/kcW7YCWsXE8mtZoxjm1J?p=preview
Question is not cleared but i will suggest you to use $scope. Here i am supposing that all your data in controller is is $scope.data
In from end 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.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-table="storeCommandsTableParams" class="table tile">
<tr ng-repeat="category in categories">
<td>
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" ng-model="selection.ids[category.id]" name="group" id="{{category.id}}" / >
{{category.name}}
</td>
</tr>
<pre ng-bind="selection.ids | json"></pre>
</table>
</body>
</html>
In script in respective contrller, write:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];
$scope.selection = {
};
});
Hi, As i understood, i have updated my answer with dummy data. Also please find the working link for plunker here PLUNKER