We Keep Coding

Want to add users to an array and display it dynamically in a table using angular and javascript

I'm a beginner at javascript and angularjs and was recently coding to display all the users in my array in a table and have them update dynamically as I add more users through a form... however when I run my code all I get is "Fill out the entire form!". I was hoping you guys could tell me what I am doing wrong (most importantly) and how I could fix it.
Thanks!
My HTML:
<table>
<tr>
<td colspan="5" class="align-center"><input type="text" placeholder="Search Users" class="search-users" ng-click="userSearch"/></td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" id="formFaction" /></td>
</tr>
<tr>
<td colspan="4" class="align-right error-field" id="errorField"></td>
<td colspan="1" class="align-right"><button type="button" class="add-user" ng-click="addUser()"/> Add </button></td>
</tr>
</table>
My Javascript/Angular:
$scope.jsFirstName = document.getElementById('formFirstName').value;
$scope.jsLastName = document.getElementById('formLastName').value;
$scope.jsRace = document.getElementById('formRace').value;
$scope.jsClass = document.getElementById('formClass').value;
$scope.jsFaction = document.getElementById('formFaction').value;
$scope.jsID = users.length;
$scope.addUser = function () {
$scope.character = {};
$scope.character.id = $scope.jsID+1;
$scope.character.firstName = $scope.jsFirstName;
$scope.character.lastName = $scope.jsLastName;
$scope.character.faction = $scope.jsFaction;
$scope.character.class = $scope.jsClass;
$scope.character.race = $scope.jsRace;
if ($scope.jsFirstName.length === 0 || $scope.jsLastName.length === 0 || $scope.jsFaction.length === 0 || $scope.jsClass.length === 0 || $scope.jsRace.length === 0) {
document.getElementById('errorField').innerHTML = "Fill out the entire form!";
} else {
users.push(character);
}
};
});

As you are using AngularJS, you should use ng-model directive to pass the data from the view to controller instead of doing it manually using Javascript. So, you should never use document.getElementById within a controller.
These changes you have to made in your code :
add ng-model directive in each input type.
pass all the form data inside an object using ng-model.
Ex :
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
Here, I created user object and then we can pass this whole object using ng-click="addUser(user)".
Working demo :
var app = angular.module('myApp',[]);
app.controller('userController',function($scope) {
$scope.usersData = [];
$scope.addUser = function(user) {
$scope.usersData.push(user);
$scope.user = {};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userController">
<table>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td>
</tr>
<tr>
<td colspan="1" class="align-right">
<input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/>
</td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Race</td>
<td>Class</td>
<td>Faction</td>
</tr>
<tr ng-repeat="users in usersData">
<td>{{users.formFirstName}}</td>
<td>{{users.formLastName}}</td>
<td>{{users.formRace}}</td>
<td>{{users.formClass}}</td>
<td>{{users.formFaction}}</td>
</tr>
</table>
</div>

Since you use angular, you should not do what you do.
Let's take an exemple out of your code : FirstName :
<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Others like this -->
<td ng-bind="errorField"></td>
<!-- OR INSTEAD -->
<td>{{errorField}}</td>
Now you should have a controller, right ? So, in your controller, you can do this :
$scope.addUser = function() {
$scope.character = {};
$scope.character.firstName = $scope.firstName;
// Others like this
if($scope.firstName === "") { // More conditions
$scope.errorField="Please fill out the form";
}
}
This is why Angular has been made.

If you are using angular use 2 way data binding. Add ng-modal="fromFirstName" .... Etc to your inputs . In your controller set up local variable like var firstname = $scope.formFirstName . As it's 2 way data binding in real time you views and models are changed. When the user clicks the button you can check for emptiness. Hope this helps

Try using the bellow
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
$scope.users = [{fname:"sj",lname:"rao",class:"10"},{fname:"fvsdf",lname:"sdf",class:"1120"}];
$scope.addUser = function () {
var newUser = {};
newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
$scope.users.push(newUser);
}
});
</script>
<div ng-app="myusersList" ng-controller="myCtrl">
<ul>
<li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
</ul>
<input ng-model="fname">
<input ng-model="lname">
<input ng-model="class">
<button ng-click="addUser()">Add</button>
</div>
<p>Write in the input field to add users.</p>
</body>
</html>

angularjs data is not showing in table

I am creating a web app in which I am using angularjs for SQL connectivity.
I have two users (admin,Regional Partner Manager) data of admin is showing properly on my table but data of Regional Partner manager Is Not showing.
Here is my js file:
$scope.getsonvindata = function () {
$scope.loadimage = true;
$scope.names = '';
$scope.resetfilters();
//$scope.area = location;
// get sonvin data list and stored in sonvinrpm $scope variable
$http.get('/angularwebservice/frmcosonvinrpm4.asmx/frmsonvinrpm', {
params: {
log: log,
from: $scope.from,
to: $scope.to,
pm: pm
}
})
.then(function (response) {
$scope.sonvinrpm = response.data.procompanysonVin;
console.log($scope.sonvinrpm);
//pagination
$scope.totalItems = $scope.sonvinrpm.length;
$scope.numPerPage = 50000;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.sonvinrpm.indexOf(value);
return (begin <= index && index < end);
};
$scope.loadimage = false;
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
else {
$scope.errormessage = '';
}
});
My table:
<table id="table" class="table table-bordered font" style="width: 110%;">
<thead>
<tr class="bg-primary">
<th>Edit</th>
<th>SrNo</th>
<th>Date</th>
<th>Hotel/School</th>
<th>Venue</th>
<th>Zone</th>
<th>Location</th>
<th>Start Time</th>
<th>Brand Name</th>
<th>Program</th>
<%--<th>Count</th>--%>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td><i class="glyphicon glyphicon-filter"></i></td>
<td></td>
<%--<th>SonvinId</th>--%>
<td>
<div class="left-margin form-control-wrapper form-group has-feedback has-feedback">
<input type="text" class="date floating-label erp-input" ng-model="search.date" placeholder="Date">
</div>
</td>
<td>
<input type="text" ng-model="search.venuename" placeholder="Hotel/School" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.venue" placeholder="Venue" class="erp-input" />
</td>
<%--<th>Day</th>--%>
<%--<th>Company</th>--%>
<td>
<input type="text" ng-model="search.zone" placeholder="Zone" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.location" placeholder="Location" class="erp-input"></td>
<td>
<%--<div class="form-control-wrapper"> id="time"--%>
<input type="text" ng-model="search.starttime" class="floating-label erp-input" placeholder="Start Time">
<%--</div>--%>
</td>
<%-- <th>End</th>--%>
<%--<th>Hrs</th>--%>
<td>
<input type="text" ng-model="search.brand" placeholder="Brand Name" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.program" placeholder="Program" class="erp-input" /></td>
</tr>
<%--| filter :{date: mddate,brand: mdbrand, zone: mdzone, location: mdlocation, starttime: mdstart,program: mdprogram,venuename: mdvenuename,venue: mdvenue }--%>
<tr ng-repeat="x in sonvinrpm | orderBy:predicate:reverse | filter:paginate| filter:search">
<td><button type="button" ng-click="getassigntrainerdata(x)" class="btn btn-sm btn-primary" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#assigntrainermodel"><i class="glyphicon glyphicon-pencil"></i></button></td>
<td>{{x.srno}}</td>
<%--<td>{{x.sonvinid}}</td>--%>
<td>{{x.date}}</td>
<td class="bg-success"><a ng-bind="x.venuename" ng-click="DetailsFunction(x)" class="erp-table-a" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#Detailsmodel"></a></td>
<td>{{x.venue}}</td>
<%-- <td>{{x.day}}</td>--%>
<%--<td>{{x.company}}</td>--%>
<td>{{x.zone}}</td>
<td>{{x.location}}</td>
<td>{{x.starttime}}</td>
<%--<td>{{x.endtime}}</td>--%>
<%--<td>{{x.hrs}}</td>--%>
<td>{{x.brand}}</td>
<td>{{x.program}}</td>
<%--<td>count</td>--%>
</tr>
<tr>
<td colspan="12"><pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination></td>
</tr>
</tbody>
</table>
and now the data I am getting from web service for my Regional Partner Manager:
{"procompanysonVin":[{"srno":1,"sonvinid":null,"id":3401,"date":"22-10-2016","day":"Sat ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":" NARAYANA SCHOOL","venue":" SITLA ASANSOL"},{"srno":2,"sonvinid":null,"id":3400,"date":"23-10-2016","day":"Sun ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":"NARAYANA SCHOOL","venue":" BENGAL AMBUJA HOUSING COMPLEX AMBUJA DURGAPUR WEST BENGAL"}]}
the data is coming in my webservice, what is wrong here?
NOTE: data of admin is printing on my table but not of regional partner manager

First thing is i was not able to find where are you calling $scope.getsonvindata function. You are just defining function but not calling anywhere in the code. like this
$scope.getsonvindata();
Second is you have applied filters wrongly.
Here is the proper way to set order by filter.
add scope
$scope.predicate = 'venue';
$scope.reverse = true;
then add to the ng-repeat
orderBy:predicate:reverse
Here is the working link
https://jsfiddle.net/U3pVM/27907/

In the .then(function () You have set
$scope.sonvinrpm = response.data.procompanysonVin;
But while setting data in the table you have set data model as search.zone, search.location, search.date etc.
Firstly you need to correct the key for data access.
Secondly the data which you are getting from the http request is an object which contains array.
So you need to use ng-repeat (or any other iterating logic) to traverse the data for displaying in the table.
Thirdly, sonvinrpm is an object, So you need to do null or undefined check
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
should be replaced with
if (!$scope.sonvinrpm) {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

How can i accomplish the following using knockout js?

I am trying to learn knockout.js and in an attempt to make my own code, this is what i came up with. It is a hotel package proposal where a user clicks on add hotel, and text boxes relating to hotels appear. I also want the initialized data to show in the text boxes.
I'm using this as reference.
http://knockoutjs.com/examples/contactsEditor.html
Right now, the text boxes are not showing the initial data, and the code breaks when i click on add hotels
my knockout code
function Proposal(details,fee, hotelproposal) {
var self = this;
self.details = details;
self.fee = fee;
self.hotelproposal= ko.observableArray(hotelproposal);
}
function hotel(hotelname,checkin,checkout,roomtype, viewtype){
self.hotelname=hotelname;
self.checkin=checkin;
self.checkout=checkout;
self.roomtype=roomtype;
self.viewtype=viewtype;
}
// Overall viewmodel for this screen, along with initial state
function ProposalViewModel() {
var self = this;
self.info=ko.observable( new Proposal("these are the details", 1200,[new hotel("Hilton","202020","202020","double", "city") , new hotel("Hilton2","2020201","2020201","triple", "sea")]));
self.addhotel = function(hotel) {
self.info.Proposal.hotelproposal.push({
hotelname:"",
checkin:"",
checkout:"",
roomtype:"",
viewtype:""
});
};
}
ko.applyBindings(new ProposalViewViewModel());
my html code:
<h2>Proposal</h2>
<div >
<table>
<tr>
<th>Details</th>
<th>fee</th>
<th>Hotels</th>
</tr>
<tbody data-bind="foreach: info">
<tr>
<td>
<input data-bind='value: Proposal.details' />
</td>
<td><input data-bind='value: fee' /></td>
<td>
<table>
<tbody data-bind="foreach: info.hotelproposal">
<tr>
<td><input data-bind='value: hotelname' /></td>
<td><input data-bind='value: checkin' /></td>
<td><input data-bind='value: checkout' /></td>
<td><input data-bind='value: roomtype' /></td>
<td><input data-bind='value: viewtype' /></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addhotel'>Add hotel</a>
</td>
</tr>
</tbody>
</table>
</div>
This code is not working. Can someone point out whats wrong?

Model is not getting updated - AngularJS

I have a simple page where there are list of existing item (these can be modified) and option to add new items to the existing list.
There are 2 sections, CodeLookup and Benchmark. Design of both section is same ( as explained above).
There is a link which will restore all the changes back to the initial state of page.
On JS , there are arrays, one for storing the list which is displayed and a backup array which stores initial state of list. There is an add function which adds newly input data to the list. Lastly there is a cancel method (linked to cancel link) which will restore the list to its initial state. This cancel method just put the original list in the list used to display data.
Now the codelookup value is restored on hit of cancel the first time. But if you modify again in the list and hot cancel, restoration doesnot happen. Also benchmark is not resored at all. I have put breakpoint on Chrome dev tool and found that the list contain the values from original list however its not reflecting on UI.
Any help in fixing this is appreciated.
Below is the code :
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<SCRIPT type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></SCRIPT>
<script type="text/javascript">
var referenceDataMaintainenceApp = angular.module('referenceDataMaintainenceApp',[] );
referenceDataMaintainenceApp.controller('referenceDataMaintainenceCtrl', function ($scope) {
$scope.orig_lookup_codes_details;
$scope.orig_calendar_details;
$scope.orig_pams_fields;
$scope.orig_brokers_details;
$scope.lookup_codes_details = [{'lookupName':'ac_asset','codeName':'ABCD','codeDetail':'sdfsdfsdf','ruleDetail':'sdsdsdsdsd','active':false}];
$scope.benchmarks_details = [{'benchmarkName':'Bench1','benchmarkDesc':'First Entry','active':false}];
$scope.orig_lookup_codes_details = angular.copy($scope.lookup_codes_details);
$scope.orig_brokers_details = angular.copy($scope.benchmarks_details);
$scope.addLookupCode = function() {
$scope.lookup_codes_details.push($scope.new_lookup_code);
$scope.new_lookup_code = getLookupCodeObject();
};
$scope.addBenchMark = function() {
$scope.benchmarks_details.push($scope.new_benchmark);
$scope.new_benchmark = getBenchMarkObject();
};
$scope.cancelData = function() {
$scope.brokers_details = $scope.orig_brokers_details;
$scope.lookup_codes_details = $scope.orig_lookup_codes_details;
console.log("sdsd");
//$http.post('/data/save', $scope.benchmarks_details);
};
});
function getLookupCodeObject () {
lookup_code = {
lookupName : '',
codeName : '',
codeDetail : '',
ruleDetail : '',
active : false
};
return lookup_code;
}
function getBenchMarkObject () {
benchmark = {
benchmarkName : '',
benchmarkDesc : '',
benchmarkId : '',
benchmarkType : ''
};
return benchmark;
}
</script>
</head>
<body ng-app="referenceDataMaintainenceApp" ng-controller="referenceDataMaintainenceCtrl" >
<div><A class="operationalnav" ng-click="cancelData()"
href="javascript:;">Cancel</A> </div>
<br />
<br />
<TABLE id="tblGridLookupCodes" class="tableData" border="0"
width="100%">
<THEAD>
<TR bgColor="#eaeaea">
<TD class="tableTitle" noWrap>Code Name</TD>
<TD class="tableTitle" noWrap>Description</TD>
<TD class="tableTitle" noWrap align="center">Active</TD>
</TR>
</THEAD>
<TBODY>
<TR ng-repeat="lookup_code_detail in lookup_codes_details">
<td nowrap="nowrap">{{lookup_code_detail.codeName}}</td>
<td nowrap="nowrap">
<input type="text" name="codeLookupBean[0].codeDescription"
maxlength="100" size="80" ng-model="lookup_code_detail.codeDetail" />
</td>
<td nowrap="nowrap" align="center">
<input type="checkbox" name="codeLookupBean[0].active"
ng-model="lookup_code_detail.active" />
</td>
</TR>
</TBODY>
</TABLE>
<HR width="100%">
<table>
<tr>
<td>
<INPUT id="codeNameInput" name="codeNameInput"
maxLength="32" ng-model="new_lookup_code.codeName" />
</td>
<td>
<INPUT id="descInput" name="descInput" maxLength="100"
size="80" ng-model="new_lookup_code.codeDetail">
</td>
<td>
<INPUT id="activeInput" name="activeInput" CHECKED type="checkbox"
ng-model="new_lookup_code.active" />
</td>
<td>
<INPUT id="btnAddRow" class="btnz" title="Add Row"
ng-click="addLookupCode($event)" name="btnAddRow" value=" Add "
type="button" />
</td>
</tr>
</table>
<br /><br /><br />
<TABLE id="tblGridBenchmarks" class="tableData" border="0" width="100%">
<THEAD>
<TR bgColor="#eaeaea">
<TD class="tableTitle" noWrap>Benchmark Name</TD>
<TD class="tableTitle" noWrap>Description</TD>
</TR>
</THEAD>
<TBODY>
<TR ng-repeat="benchmark_detail in benchmarks_details">
<TD>{{benchmark_detail.benchmarkName}}</TD>
<TD><INPUT name="benchmarkBean[0].benchmarkDesc"
maxLength="255" size="120" ng-model="benchmark_detail.benchmarkDesc"></TD>
</TR>
</TBODY>
</TABLE>
<HR width="100%">
<table>
<tr>
<td>Enter Benchmark Name:<BR> <INPUT
id="benchmarkNameInput" name="benchmarkNameInput"
ng-model="new_benchmark.benchmarkName" maxLength="100" size="30">
</td>
<td>Description:<BR> <INPUT name="benchmarkDescInput"
ng-model="new_benchmark.benchmarkDesc" maxLength="255" size="80">
</td>
<td><INPUT id="btnAddRowComment" class="btnz" title="Add Row"
ng-click="addBenchMark($event)" name="btnAddRowComment"
value=" Add " type="button"></td>
</tr>
</table>

It seems like $digest cycle was not run at all or correctly.
try to run $scope.$apply() and see if it works.
example:
http://jsfiddle.net/00d0ux1x/
For more information see
http://www.sitepoint.com/understanding-angulars-apply-digest/
However in your case problem is
javascript:; change to javascript:void(0);
use angular.copy(); to copy original array if you don't want to modify it in later use.
in cancel function you are setting $scope.brokers_details and in view using $scope.benchmarks_details. (also having orig_brokers_details)
See fixed solution
http://jsfiddle.net/00d0ux1x/3/

Do not save data from editing ngModel

I have table which dynamically add data. When I edit data in first table it is not saved in the first or the second table but should be.
$scope.correctiveData = [
[
{"name":"Description of Corrective Action (1)","values":[]},
{"name":"Action Taken By (name) (1)","values":[]},
{"name":"Company (1)","values":[]},
{"name":"Date (1)","values":[]}
]
];
/*---------------First table-----------*/
<tr ng-repeat="col in correctiveData">
<td><textarea>{{col[0].values[0]}}</textarea></td>
<td><input type="text" value="{{col[1].values[0]}}"></td>
<td><select ng-model="col[2].values[0]">
<option ng-repeat="com in company">{{com.name}}</option>
</select>
</td>
<td>
<div class="input-append" id="date" class="datetimepicker" time ng-model="col[3].values[0]">
<input class="span2" class="inputIcon" type="text" data-format="MM/dd/yyyy HH:mm PP" ng-model="col[3].values[0]" required pattern="\d\d/\d\d/\d\d\d\d\s\d\d:\d\d\s(AM|PM)">
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>
</td>
</tr>
/*--------------------Second table-------------------*/
<tr ng-repeat-start="data in correctiveData">
<td>{{data[0].name}}</td>
<td>{{data[0].values[0] || 'required'}}</td>
</tr>
<tr>
<td>{{data[1].name}}</td>
<td>{{data[1].values[0] || 'required'}}</td>
</tr>
<tr>
<td>{{data[2].name}}</td>
<td>{{data[2].values[0] || 'required'}}</td>
</tr>
<tr ng-repeat-end>
<td>{{data[3].name}}</td>
<td>{{data[3].values[0] || 'required'}}</td>
</tr>
When I wrote data from javascript like below
"{"name":"Description of Corrective Action (1)","values":['Some value']}"
it's show in both of tables but when I edit it it doesnt save.
Also tables are in two different templates wich loads from two different files but have same controller.