When I checked checkboxes one by one ,the count value should be increased and the same value should be showed in place of paragraph tag and same case should be happened while I unchecked too.
The above intend behavior is not happening.
Could any one please guide me to resolve this issue.
HTML file and controller.js
<html ng-app="controllers">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<h2>{{"Contact " + "list"}}</h2>
<p id="demo" align="center"></p>
<div ng-controller='userCtrl'>
<table align="center">
<tr>
<td>Status</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr ng-repeat="x in contacts">
<td><input type="checkbox" id="name1" onchange="getElementById('demo').innerHTML=contactCount()"></td>
<td>{{x.name}}</td>
<td>{{x.number}}</td>
</tr>
</table>
</div>
<script>
var count = 0;
function contactCount()
{
var y=document.getElemenetById("name1").checked;
if(Number(y)== 1)
{
count+=1;
}
else
{
count;
}
return count;
}
</script>
</body>
</html>
**controller.js**
var controllers = angular.module('controllers', []);
controllers.controller('userCtrl', function($scope) {
$scope.contacts=[
{name:"Mr X",number:"1234"},
{name:"Mr Y",number:"4567"},
{name:"Mrs Z",number:"0214"},
{name:"Mr A",number:"9564"}
];
});
There is a spelling mistake in your code.
var y=document.getElemenetById("name1").checked;
should be like this
var y=document.getElementById("name1").checked;
you typed getElemenetById and it should be getElementById
var controllers = angular.module('controllers', []);
controllers.controller('userCtrl', function($scope) {
$scope.contacts=[
{name:"Mr X",number:"1234"},
{name:"Mr Y",number:"4567"},
{name:"Mrs Z",number:"0214"},
{name:"Mr A",number:"9564"}
];
});
<html ng-app="controllers">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<h2>{{"Contact " + "list"}}</h2>
<p id="demo" align="center"></p>
<div ng-controller='userCtrl'>
<table align="center">
<tr>
<td>Status</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr ng-repeat="x in contacts">
<td><input type="checkbox" id="name1" onchange="getElementById('demo').innerHTML=contactCount()"></td>
<td>{{x.name}}</td>
<td>{{x.number}}</td>
</tr>
</table>
</div>
<script>
var count = 0;
function contactCount()
{
var y= document.getElementById("name1").checked;
if(Number(y)== 1)
{
count+=1;
}
else
{
count;
}
return count;
}
</script>
</body>
</html>
Related
I have many objects that I want to combine, and then display only the ones which have a matching ID to another object.
So for instance; when a user clicks on John, it would display the fishing trips that john went on (there is are matching IDs in the User Info Object and the Fishing Trip Object).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore()">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
<div>
<h3>Fishing Trips for selected person:</h3>
{{fishingTrip1}} {{fishingTrip2}}
</div>
</div>
</div>
</body>
</html>
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.fishingTrip1 = [{"location":"Alaska", "fisherman":"John", "ID":"123"},
{"location":"Alaska", "fisherman":"Bob", "ID":"144"},
{"location":"Alaska", "fisherman":"Alex", "ID":"161"}];
$scope.fishingTrip2 = [{"location":"Colorado", "fisherman":"Sammy", "ID":"111"},
{"location":"Colorado", "fisherman":"John", "ID":"123"},
{"location":"Colorado", "fisherman":"Jerry", "ID":"aAAa"}];
$scope.selectedID = null;
$scope.viewMore = function(ID){
$scope.showDiv = true;
$scope.selectedID = ID;
};
});
https://plnkr.co/edit/M8X51cmtMmTNNf2S?open=lib%2Fscript.js&deferRun=1
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore(x)">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
<div>
<h3>Fishing Trips for selected person:</h3>
<ul>
<li ng-repeat="trip in fishingTripsToShow">{{trip.location}}</li>
</div>
</div>
</div>
</body>
</html>
And in your js file
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.fishingTrip1 = [{"location":"Alaska", "fisherman":"John", "ID":"123"},
{"location":"Alaska", "fisherman":"Bob", "ID":"144"},
{"location":"Alaska", "fisherman":"Alex", "ID":"161"}];
$scope.fishingTrip2 = [{"location":"Colorado", "fisherman":"Sammy", "ID":"111"},
{"location":"Colorado", "fisherman":"John", "ID":"123"},
{"location":"Colorado", "fisherman":"Jerry", "ID":"aAAa"}];
$scope.fishingTripsToShow = [];
$scope.selectedFisherman = null;
$scope.viewMore = function(selectedFisherman){
$scope.showDiv = true;
$scope.selectedFisherman = selectedFisherman;
$scope.fishingTripsToShow = [];
$scope.fishingTrip1.forEach(function(f){
if(f.fisherman == $scope.selectedFisherman.name){
$scope.fishingTripsToShow.push(f);
}
});
$scope.fishingTrip2.forEach(function(f){
if(f.fisherman == $scope.selectedFisherman.name){
$scope.fishingTripsToShow.push(f);
}
});
console.log($scope.fishingTripsToShow);
};
});
Anybody suggest me, where I went wrong?And also I need some explanation about the script I used for editing and removing because I just referred some materials and used that code without understanding.Can anyone explain this?
Code:
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
<tr ng-repeat="faculty in facultymembers">
<td><span ng-hide="editmode">{{faculty.id}}</span><input
type="text" ng-show="editmode" ng-model="faculty.id"></td>
<td><span ng-hide="editmode">{{faculty.name}}</span><input
type="text" ng-show="editmode" ng-model="faculty.name"></td>
<td><span ng-hide="editmode">{{faculty.salary}}</span><input
type="text" ng-show="editmode" ng-model="faculty.salary"></td>
<td><button ng-hide="editmode"
ng-click="editmode=true;editfaculty(faculty)">EDIT</button>
<button ng-show="editmode" ng-click="editmode=false">DONE</button></td>
<td><button ng-click="removefaculty($index)">REMOVE</button></td>
</tr>
</table>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("mycont", function($scope) {
$scope.facultymembers = [];
$scope.addfaculty = function(faculty) {
$scope.facultymembers.push(faculty);
$scope.faculty = {};
};
$scope.editfaculty = function(index) {
$scope.editing = $scope.facultymembers.Indexof(index)
};
$scope.removefaculty = function(index) {
console.log(index);
$scope.facultymembers.splice(index, 1);
}
});
</script>
</body>
</html>
I think you missed track by $index:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.facultymembers = [{
'id': 1,
'name': 'Test',
'salary': 2000
}];
$scope.addfaculty = function(faculty) {
$scope.facultymembers.push(faculty);
$scope.faculty = {};
};
$scope.editfaculty = function(index) {
$scope.editing = $scope.facultymembers.Indexof(index)
};
$scope.removefaculty = function(index) {
console.log(index);
$scope.facultymembers.splice(index, 1);
}
});
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" class="table">
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
<tr ng-repeat="faculty in facultymembers track by $index">
<td><span ng-hide="editmode">{{faculty.id}}</span><input type="text" ng-show="editmode" ng-model="faculty.id"></td>
<td><span ng-hide="editmode">{{faculty.name}}</span><input type="text" ng-show="editmode" ng-model="faculty.name"></td>
<td><span ng-hide="editmode">{{faculty.salary}}</span><input type="text" ng-show="editmode" ng-model="faculty.salary"></td>
<td><button ng-hide="editmode" ng-click="editmode=true;editfaculty($index)">EDIT</button>
<button ng-show="editmode" ng-click="editmode=false">DONE</button></td>
<td><button ng-click="removefaculty($index)">REMOVE</button></td>
</tr>
</table>
</div>
I have such type of program.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d, x)
{
x.balance = x.Amt - d;
if(d > x.Amt){
$scope.isExceeded = true;
} else {
$scope.isExceeded = false;
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
<td ng-if="error"> Error</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
<td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Submit" ng-disabled="isExceeded"></td>
</tr>
</table>
</body>
</html>
What I want is submit button should become disable if any Entered Amt value exceeds the Amt value.
I m not getting an idea of how can I achieve this type of condition.I an new to angularjs.
You can have an variable isExceeded and use it in the angular markup with ng-disable directive to disable the button.
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
<td ng-if="error"> Error</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
<td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td>
</tr>
<tr>
<td colspan="4" ng-disable="isExceeded"><input type="button" value="Submit"></td>
</tr>
</table>
</body>
and check it in the angular controller like
$scope.value=function(d, x)
{
if(d > x.Amt){
$scope.isExceeded = true;
} else {
x.balance = x.Amt - d;
$scope.isExceeded = false;
}
}
making a program in which i need to work with angular js array, i need to display angular js array element returned by a function in a good manner. like first contains first element,second contains second element and so on... and use of function is mandatory to perform some future tasks.
thanks in advance
for example:-
first attempt:-
first element= 23
second element = 45
second attempt:-
first element= 20
second element = 15
third attempt... fourth attempt and so on
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body><div ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat='selecting in selects' ng-init="selecting.var1=selecting.var2=a='';">
<input type="text" ng-model="selecting.var1">
<input type="text" ng-model="selecting.var2">
<button type='button' ng-click='remove(selecting)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
</div>
<p>{{ x = test()}}</p>
<!-- first block -->
<!-- second block and so on-->
<li ng-repeat="x in b" style="list-style:none">
first attempt= {{ x.first | number:0 }} <br>
second second= {{ x.second | number:0}}
</li>
</div>
<script>
var app = angular.module("plunker",[]);
app.controller("MainCtrl",['$scope',function($scope){
$scope.test = function()
{
var result=1,id2,a,b;
$scope.result1 = [{}];
angular.forEach($scope.selects, function(value)
{ // loop over array to process all items
a = value.var1;
b = value.var2;
alert(a);
$scope.result1.push({name:$scope.selecting.var1});
//myarray = {"first":a,"second":b}
//a['first','second'] = (a,b);
return result1;
})
}
$scope.selects = [{}]; // default 1 sets
// functions to ADD/Remove --------------------------------------------------------------------------------
$scope.add = function()
{
$scope.selects.push({});
}
$scope.remove = function(item)
{
angular.forEach($scope.selects, function(value, key)
{
if (value == item)
{
$scope.selects.splice(key, 1);
}
});
}
// functions to ADD/Remove ---------------------------------------------------------------------------------
}]);
</script>
</body>
</html>
I've no idea what you are trying to achieve in your test() function but if you are just trying to display the content of your then model there doesn't seem to be any need to create a function for that: Angular keeps the model in sync for you, that's one of the main selling points of the framework.
Is that what you are trying to achieve?
DEMO
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat='textBoxes in textBoxGroups' >
<input type="text" ng-model="textBoxes.textBoxOne.value">
<input type="text" ng-model="textBoxes.textBoxTwo.value">
<button type='button' ng-click='remove($index)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
</div>
<div>
<button type='button' ng-click=doSomething()>Do Something</button>
</div>
<h3>Text Box Group Model</h3>
<table>
<thead>
<tr>
<th>$index</th>
<th>TxtBox1</th>
<th>TxtBox2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='textBoxes in textBoxGroups'>
<td>{{$index}}</td>
<td>{{textBoxes.textBoxOne.value}}</td>
<td>{{textBoxes.textBoxTwo.value}}</td>
</tr>
</tbody>
</table>
<h3>Char Count: {{charCount}}</h3>
<h3 ng-show="processedData.length">Data After Some Process</h3>
<table ng-show="processedData.length">
<thead>
<tr>
<th>$index</th>
<th>Original</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in processedData'>
<td>{{$index}}</td>
<td>{{data.original}}</td>
<td>{{data.updated}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("plunker",[]);
app.controller("MainCtrl", ['$scope', function($scope){
$scope.textBoxGroups = [ {
textBoxOne: { value: '' },
textBoxTwo: { value: '' }
} ];
$scope.add = function(){
$scope.textBoxGroups.push({
textBoxOne: { value: '' },
textBoxTwo: { value: '' }
});
}
$scope.remove = function($index){
// just pass in the $index of the element you want to remove
// and splice it out
$scope.textBoxGroups.splice($index, 1);
}
$scope.doSomething = function(){
$scope.processedData = [];
$scope.charCount = 0;
angular.forEach($scope.textBoxGroups, function(textBoxGroup){
$scope.processedData.push({
original: textBoxGroup.textBoxOne.value,
updated: textBoxGroup.textBoxOne.value.toUpperCase()
});
$scope.charCount += textBoxGroup.textBoxOne.value.length;
});
}
}]);
</script>
</body>
</html>
I have to create a table as follows from a nested object.
JSON object :
{
"A":{
"1":"X",
"2":"Y",
"3":"Z"
},
"B":{
"1":"P",
"2":"Q",
"3":"R"
}
}
Desired Table :
A: X|Y|Z
B: P|Q|R
HTML code :
<!DOCTYPE html>
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<div ng-repeat='(key,val) in arr'>{{temp(val)}}
<div ng-repeat='(nestedKey,nestedVal) in aux'>
{{nestedVal}}
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.arr={"A":{"1":"X","2":"Y","3",},"B":{"1":"P","2":"Q"}};
$scope.temp = function(val)
{
console.log(val);
$scope.aux = val;
}
}]);
</script>
I am unable to understand how and where to place the <table>,<tr> and <td> tags to be able to generate the table as describe.
EDIT:
tr is row and td is table cell
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<table>
<tr ng-repeat='(key,val) in arr'>
<td>
{{key}}
</td>
<td ng-repeat='(nestedKey,nestedVal) in val'>
{{nestedVal}}
</td>
</tr>
</table>
</div>
</body>
<div ng-controller="GreetingController" >
<table>
<tr>
<td><div ng-repeat='(key,val) in arr'>{{temp(val)}} </td>
</tr>
<tr><td> <div ng-repeat='(nestedKey,nestedVal) in aux'> </td>
{{nestedVal}}
</div>
</tr>
</div>
</table>
</div>