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>
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);
};
});
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>
I'm making a calculator and I'm stumbling at the first JS hurdle. I'm trying to set up event listeners on the number buttons so that a functions runs on click, but I get the error that I can't set up an event handler on null. But I can't see where I am going wrong!?
I am trying to organise my code as I go along similar to an online course that I did - separating out all the functions and trying to keep it easy to read.
See code and thanks in advance:
//TOTAL CONTROLLER
var totalController = (function () {
})();
//UI CONTROLLER
var UIController = (function () {
var DOMstrings = {
calcbuttons: '.calcButtons',
number: '.number',
operator: '.operator',
equals: '.equals',
total: '#total'
};
return {
getDOMstrings: function () {
return DOMstrings;
}
};
})();
//GLOBAL CONTROLLER
var controller = (function (totalCTRL, UICtrl) {
var setupEventListeners = function () {
var DOM = UICtrl.getDOMstrings();
var el = document.querySelector(".calcButtons");
el.addEventListener('click', function (e) {
//var table = e.target;
//if (table.classList)
console.log(e);
//ctrlAddNumber();
});
// click operator
//click C
//click AC
//click equals
};
var ctrlAddNumber = function () {
var selectedNumber;
//1. get number from html from click
selectedNumber = document.querySelector(DOM.number).innerHTML;
console.log(number);
//2. add to display
};
return {
init: function () {
console.log('Application has started.');
setupEventListeners();
}
};
})(totalController, UIController);
controller.init();
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link type="text/css" rel="stylesheet" href="calc_style.css" />
<style>
#import url('https://fonts.googleapis.com/css?family=Lato');
</style>
<script type='text/javascript' src='calcjs.js'></script>
<title>JavaScript Calculator</title>
</head>
<body>
<div id="container">
<div id="calculator">
<div id=t otal></div>
<table class="calcButtons" cellspacing="0" cellpadding="0">
<tr>
<td class="wide">AC</td>
<td class="wide">←</td>
<td class="wide"></td>
<td class="operator"></td>
</tr>
<tr>
<td class="number">7</td>
<td class="number">8</td>
<td class="number">9</td>
<td class="operator">÷</td>
</tr>
<tr>
<td class="number">4</td>
<td class="number">5</td>
<td class="number">6</td>
<td class="operator">×</td>
</tr>
<tr>
<td class="number">1</td>
<td class="number">2</td>
<td class="number">3</td>
<td class="operator">-</td>
</tr>
<tr>
<td class="number">0</td>
<td>.</td>
<td id="equals" class="equals">=</td>
<td class="operator">+</td>
</tr>
</table>
</div>
</div>
</body>
</html>
A couple of things:
Move your JS out of the head and just below where you close the body. The script tag is blocking and the browser won't continue with rendering your site till it has processed the script element.
If you want an element to be interactive, try to use an element that was meant for it. Use an anchor (a) element to navigate betweens documents and buttons (button) for most other interactions.
An HTML table needs a tbody.
Your JS code is quite a lot and I didn't have time to go through all of it so I made this small example on how it could work. I hope you can translate it to your situation.
const
calcButtons = document.querySelector('.calcButtons');
function onCalcButtonClicked(event) {
debugger;
const
clickedButton = event.target;
if (clickedButton.hasAttribute('data-number')) {
console.log('The user inputted a number: ', clickedButton.getAttribute('data-number'));
} else if (clickedButton.hasAttribute('data-action')) {
console.log('The user selected an action: ', clickedButton.getAttribute('data-action'));
}
}
calcButtons.addEventListener('click', onCalcButtonClicked);
<div id="container">
<div id="calculator">
<div id="total"></div>
<table class="calcButtons" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><button type="button" data-action="" class="wide">AC</button></td>
<td><button type="button" data-action="" class="wide">←</button></td>
<td><button type="button" data-action="" class="wide"></button></td>
<td><button type="button" data-action="" class="operator"></button></td>
</tr>
<tr>
<td><button type="button" data-number="7" class="number">7</button></td>
<td><button type="button" data-number="8" class="number">8</button></td>
<td><button type="button" data-number="9" class="number">9</button></td>
<td><button type="button" data-action="plus" class="operator">÷</button></td>
</tr>
<tr>
<td><button type="button" data-number="4" class="number">4</button></td>
<td><button type="button" data-number="5" class="number">5</button></td>
<td><button type="button" data-number="6" class="number">6</button></td>
<td><button type="button" data-action="times" class="operator">×</button></td>
</tr>
<tr>
<td><button type="button" data-number="1" class="number">1</button></td>
<td><button type="button" data-number="2" class="number">2</button></td>
<td><button type="button" data-number="3" class="number">3</button></td>
<td><button type="button" data-action="minus" class="operator">-</button></td>
</tr>
<tr>
<td><button type="button" data-number="0" class="number">0</button></td>
<td><button type="button" data-number=".">.</button></td>
<td><button type="button" data-action="equals" id="equals" class="equals">=</button></td>
<td><button type="button" data-action="divide" class="operator">+</button></td>
</tr>
</tbody>
</table>
</div>
</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;
}
}
I'm trying to get the Knockout foreach binding working in my code. I've done it many times before, but in this particular case I can't seem to get it right. I must be doing something wrong here, but I can't see it. I created a jsfiddle here: https://jsfiddle.net/9Lc144jv/
JavaScript:
var ReportModel = function (parent) {
var self = this;
self.parent = parent;
self.filters = ko.observableArray([]);
self.addFilter = function () {
self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
};
self.removeFilter = function () {
self.filters.remove(this);
};
};
var ViewModel = function () {
var self = this;
self.reportModel = false;
self.init = function () {
self.reportModel = new ReportModel(self);
};
};
var viewModel;
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
});
HTML:
<body>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Column</th>
<th>Operator</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- ko foreach: reportModel.filters -->
<tr>
<td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: columnName" /></td>
<td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: value" /></td>
<td>
<button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter">
Remove
</button>
</td>
</tr>
<!-- /ko -->
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">
<button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter">
Add
</button>
</td>
</tr>
</tfoot>
</table>
</body>
UPDATE
A few notes:
I was using the wrong attribute: "data_bind" instead of "data-bind". I corrected it now and the updated code is here: https://jsfiddle.net/9Lc144jv/2/
It's still not working even though I made that fix
When I copied and pasted it to a plain .html file and ran it, I could see something interesting in Firebug:
As you can see, running the following script in the command window shows there is nothing in the collection before clicking Add, and then something afterwards:
JSON.stringify(viewModel.reportModel.filters());
So the new object is in the observable array, but it's not binding to the table in the foreach block. But, why? From what I can see, everything looks fine.. but maybe I need a fresh pair of eyes on this. Someone please show me what I am doing wrong here...
You are setting reportModel after the bindings plus I had to add the function call to the buttons() .
slight changes:
var ReportModel = function (parent) {
var self = this;
self.parent = parent;
self.filters = ko.observableArray([]);
self.addFilter = function () {
self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
};
self.removeFilter = function () {
self.filters.remove(this);
};
};
var ViewModel = function () {
var self = this;
self.reportModel = new ReportModel(self);
self.init = function () {
console.info(self);
//self.reportModel = new ReportModel(self);
};
};
var viewModel;
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
});
HTML
<body>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Column</th>
<th>Operator</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- ko foreach: reportModel.filters -->
<tr>
<td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: columnName" /></td>
<td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: value" /></td>
<td>
<button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter()">
Remove
</button>
</td>
</tr>
<!-- /ko -->
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">
<button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter()">
Add
</button>
</td>
</tr>
</tfoot>
</table>
</body>
https://jsfiddle.net/vw2kngqq/