I am fairly new to both angularjs and javascript and am in need of some guidance. I am making an application which records time logs for a project. One of the columns needs to be delta time - the time difference between starting a log and finishing it and taking away interval time (for example if I started a project at 1pm, finished at 3pm but had a 30 minute break inbetween the delta time would be 2 & 1/2 hours).
Here is my code so far, whatever I try do either comes up with the wrong time or NaN. Any help would be appreciated!
View:
<div class="main" ng-controller="MainController">
<div class="container-fluid">
<div class="header">
<div class="container-fluid">
<h1>{{ title }}</h1>
</div>
</div>
<div class="row container-fluid">
<!--<div class="col-md-4">-->
<div class="panel panel-default">
<div class="panel-body">
<!--<<form ng-submit="addNew(timeLogs)" >-->
<form>
<div class="form-group col-md-6">
<label>Project</label>
<input type="text" class="form-control" placeholder="Project" ng-model="project" >
</div>
<div class="form-group col-md-6">
<label>Phase</label>
<input type="text" class="form-control" placeholder="Phase" ng-model="phase" >
</div>
<div class="form-group col-md-6">
<label>Date</label>
<input type="date" class="form-control" placeholder="dd-MM-yyyy" ng-model="date" >
</div>
<div class="form-group col-md-6">
<label>Start Time</label>
<input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="startTime" required>
</div>
<div class="form-group col-md-6">
<label>Interval Time (mins)</label>
<input type="text" class="form-control without" placeholder="Int Time" ng-model="intTime" >
</div>
<div class="form-group col-md-6">
<label>End Time</label>
<input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="endTime" required>
</div>
<div class="form-group col-md-6">
<label>Comments</label>
<input type="text" class="form-control" placeholder="Comments" ng-model="comments" >
</div>
<button ng-click="addLog()">Add</button>
</form>
</div>
</div>
<!--</div>-->
</div>
<table class="table table-striped col-md-4">
<tr>
<th>Project</th>
<th>Phase</th>
<th>Date</th>
<th>Start Time</th>
<th>Int Time (mins)</th>
<th>Stop Time</th>
<th>Delta Time</th>
<th>Comments</th>
<th>Make Changes</th>
</tr>
<tr data-ng-repeat="log in logs">
<td>{{ log.project }}</td>
<td>{{ log.phase }}</td>
<td>{{ log.date | date:'dd/MM/yyyy' }}</td>
<td>{{ log.startTime | date:'hh:mma' }}</td>
<td>{{ log.intTime }}</td>
<td>{{ log.endTime | date:'hh:mma' }}</td>
<td>{{ log.startTime -- log.endTime | date:'hh:mma' }}</td>
<td>{{ log.comments }}</td>
<td>
<button class="btn btn-primary" ng-click="main.editClickHandler(item)">Edit</button>
<button class="btn btn-danger" ng-click="main.removeClickHandler(item)">Remove</button>
</td>
</tr>
</table>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Time Log';
//$scope.promo = 'The most popular books this month.';
$scope.logs = [];
$scope.addLog = function() {
$scope.logs.push({
project: $scope.project,
phase: $scope.phase,
date: $scope.date,
startTime: $scope.startTime,
intTime: $scope.intTime,
endTime: $scope.endTime,
comments: $scope.comments
});
// Clear input fields after push
$scope.project = "";
$scope.phase = "";
$scope.date = "";
$scope.startTime = "";
$scope.intTime = "";
$scope.endTime = "";
$scope.comments = "";
};
$scope.deltaTime = function(logs) {
return $scope.startTime - $scope.endTime;
;
}
}]);
Try like this
$scope.deltaTime = function(logs) {
return new Date($scope.startTime) - new Date($scope.endTime);
}
Related
I am creating sales invoice where I create one form with two database table connections like
sales details are saving in Sales_Invoice table and Items which we add in invoice will save in Item_Details table.
So here in html form I am creating table for add items after adding that I items I wish to save sales invoice in sales_details and all items in Item_Details by using sales_invoice foreign key
My data is saving but only one row is saving How can I save multiple data in django by using queryset
Html Form
<form method="post">
{% csrf_token %}
<!-- Estimate Details -->
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>Invoice Number</label>
<input type="text" class="form-control" placeholder={{invoice_number}} name="invoice_number">
</div>
<div class="col-md mb-2">
<label>Date</label>
<input type="date" class="form-control" placeholder="Invoive_Date" name="invoice_date">
</div>
<div class="col-md mb-2">
<label>Select Customer</label>
<select id="customer_id" class="form-control" name="customer_id">
<option value="">Select Customer</option>
{% if all_customers %}
{% for c in all_customers %}
<option value="{{c.customer_id}}">{{c.first_name}} {{c.surname}}</option>
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="row pb-3">
<div class="col-md-4 mb-2">
<label>Contact Person Name</label>
<input type="text" class="form-control" id="contact_person_name" name="contact_person_name"
placeholder="Contact Person">
</div>
<div class="col-md-4 mb-2">
<label>Phone</label>
<input type="number" class="form-control" placeholder="Phone" id="phone" name="phone">
</div>
</div>
<div class="row pb-3">
<div class="col-md mb-2">
<label>Bill To</label>
<textarea type="text" class="form-control" placeholder="Bill To" id="bill_to"
name="bill_to"></textarea>
</div>
<div class="col-md mb-2">
<label>Ship To</label>
<textarea type="text" class="form-control" placeholder="Ship To" id="ship_to"
id="ship_to"></textarea>
</div>
<div class="col-md mb-2">
<label>Special Instructions</label>
<textarea type="text" class="form-control" placeholder="Special Instructions"
id="special_instructions" name="special_instructions"></textarea>
</div>
</div>
<!-- Items -->
<div class="card-header">
<div class="row">
<div class="col-auto m-1 pl-2">
<img src="{% static 'images/GIF/Add.gif'%}" width="30px" height="30px">
</div>
<div class="col mt-2">
<h5>Item Details</h5>
</div>
</div>
</div>
<div>
<!-- <form> -->
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>Item</label>
<select class="form-control" placeholder="Items" id="item" name="item">
<option value="">Item</option>
{% if all_items %}
{% for i in all_items %}
<option value="{{i.item}}">{{i.item}}</option>
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-md mb-2">
<label>Unit</label>
<select class="form-control" placeholder="Units" id="unit_name" name="unit_name">
<option value="">Unit</option>
{% if all_unit %}
{% for u in all_unit %}
<option value="{{u.unit_name}}">{{u.unit_name}}</option>
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-md mb-2">
<label>Unit Price</label>
<input type="number" class="form-control" placeholder="Unit Price" id="unit_price"
name="unit_price">
</div>
<div class="col-md mb-2">
<label>Quantity</label>
<input type="number" class="form-control" placeholder="Quantity" onchange="quantityChange()" id="quantity"
name="quantity">
</div>
<div class="col-md mb-2">
<label>HSN</label>
<input type="text" class="form-control" placeholder="HSN" id="hsn" name="hsn">
</div>
<div class="col-md mb-2">
<label>Tax</label>
<input type="text" class="form-control" placeholder="Tax" id="tax_code" name="tax_code">
</div>
<div class="col-md mb-2">
<label>Amount</label>
<input type="number" class="form-control" readonly placeholder="Amount" id="amount" name="amount">
</div>
<div class="col-auto">
<P><button type="button" class="w3-btn w3-blue" id="submit">Save</button>
</div>
</div>
<!-- </form> -->
</div>
<br>
<!-- Items table -->
<div id="tab">
<div class="table-responsive-md">
<table class="table table-sm" style="background-color: #e4f7f5;" id="demo">
<thead>
<tr>
<th nowrap>Items</th>
<th nowrap>HSN</th>
<th nowrap>Quantity</th>
<th nowrap>Unit</th>
<th nowrap>Unit Price</th>
<th nowrap>Tax</th>
<th nowrap>Amount</th>
<th nowrap>Action</th>
</tr>
</thead>
<tbody id="items_tbody"></tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th id="total">Total :</th>
<td id="total_value"></td>
</tr>
<tr>
<th colspan="5"></th>
<th id="CGST">CGST :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="SGST">SGST :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="discount">Discount :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="round_off">Round Off :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="grand_total">Grand Total :</th>
<td>200</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- Other Details -->
<div class="card-header">
<div class="row">
<div class="col-auto m-1 pl-2">
<img src="../static/images/GIF/Setting.gif" width="30px" height="30px">
</div>
<div class="col mt-2">
<h5>Other Details</h5>
</div>
</div>
</div>
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>User</label>
<input type="text" class="form-control" placeholder={{username}} id="user" name="username">
</div>
<div class="col-md mb-2">
<label>Remarks</label>
<textarea type="text" class="form-control" placeholder="Remarks" name="remarks"></textarea>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary" onclick=SaveData()>Save</button>
</div>
</div>
</form>
<div id="myDiv"></div>
</div>
</div>
<br>
</div>
<br>
<scripts>
//Add Items
var items = [];
$("#submit").on("click", function () {
var temp =
{
"item" : document.getElementById("item").value,
"hsn" : document.getElementById("hsn").value,
"quantity" : document.getElementById("quantity").value,
"unit_name" : document.getElementById("unit_name").value,
"unit_price" : document.getElementById("unit_price").value,
"tax_code" : document.getElementById("tax_code").value,
"amount":document.getElementById("amount").value,
};
items.push(temp);
console.log(items)
$("#demo > tbody").empty();
var total_amount = 0
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td><td><button class='remCF1 btn btn-small btn-danger'" +
"onClick='delRow(" + i + ")' name='delButton'>Delete</button></td></tr>"
console.log(items[i].amount)
items[i].amount = parseInt(items[i].amount)
total_amount = total_amount + items[i].amount
$('#total_value').text(total_amount);
};
});
function quantityChange(){
var base_Amount = parseInt(document.getElementById("quantity").value) * parseInt(document.getElementById("unit_price").value);
$("#amount").val(base_Amount);
}
function delRow(item) {
this.items.splice(item, 1);
document.getElementById("row" + item).remove();
console.log(items)
$("#demo > tbody").empty();
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td><td><button class='remCF1 btn btn-small btn-danger'" +
"onClick='delRow(" + i + ")' name='delButton'>Delete</button></td></tr>"
};
}
function SaveData(){
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td></tr>"
};
}
console.log("OUT");
</script>
Views.py
if request.method == 'POST':
#SALES INVOICE
invoice_number=gen_invoice_number
invoice_date=request.POST['invoice_date']
customer_id=request.POST['customer_id']
customer_obj= Customer.objects.get(customer_id=customer_id)
special_instructions=request.POST['special_instructions']
company=company_label
#invoice total
total= 100 #request.POST['total']
CGST= 10 #request.POST['CGST']
SGST= 10 #request.POST['SGST']
discount=10 # request.POST['discount']
round_off= 100 #request.POST['round_off']
grand_total=100 #request.POST['grand_total']
#other details
user=username
print(user)
user_obj = User.objects.get(username=user)
print(user_obj)
remarks=request.POST['remarks']
sales_details=Sales_Invoice.objects.create(invoice_number=invoice_number,invoice_date=invoice_date,customer_id=customer_obj,company=company,special_instructions=special_instructions,total=total,CGST=CGST,SGST=SGST,discount=discount,round_off=round_off,grand_total=grand_total,user=user_obj,remarks=remarks)
sales_details.save()
total_sales = Sales_Invoice.objects.filter(company=company_label).all().count() + 1
new_gen_invoice_number=f"{company_label}-{month}{year}-{total_sales}"
#ITEM DETAILS
sales_invoice_id = gen_invoice_number
sales_invoice_id_obj=Sales_Invoice.objects.get(invoice_number=sales_invoice_id)
item = request.POST['item']
item_obj= New_Stock_Entry.objects.get(item=item)
hsn = request.POST['hsn']
quantity = request.POST['quantity']
tax_code = request.POST['tax_code']
unit_name = request.POST['unit_name']
unit_obj = Unit_Setting.objects.get(unit_name=unit_name)
unit_price = request.POST['unit_price']
amount = request.POST['amount']
items=Items_Details.objects.create(sales_invoice_id=sales_invoice_id_obj,item=item_obj,hsn=hsn,quantity=quantity,unit_name=unit_obj,unit_price=unit_price,tax_code=tax_code,amount=amount)
items.save()
I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.
To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.
I am new to Angularjs. I tried to create a dynamic table but the table is not generated and I noticed that the form submit also not working. Please have a look and advise me.
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push( {
'name' : $scope.name,
'email' : $scope.email,
'dept' : $scope.dept
});
$scope.name = '';
$scope.email = '';
$scope.dept = '';
};
});
</script>
Here is the respective html.
<body>
<div ng-app = "myApp" controller="myCtrl">
<div class = "form-group" >
<form class = "student-form" ng-submit="addStudent()">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = "table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</div>
</body>
You've got a typo.
Use ng-controller instead of controller and it will work.
Directive ng-app & ng-controller code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
Controller CompanyCtrl code in controller.js
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [];
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'email': $scope.email, 'department':$scope.department});
$scope.name='';
$scope.email='';
$scope.department='';
};
)};
</script>
Directive ng-repeat code
<table class="table">
<tr>
<th>name
</th>
<th>email
</th>
<th> department
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{ {company.name}}
</td>
<td>{ {company.email}}
</td>
<td>{ {company.department}}
</td>
</tr>
</table>
**Directive ng-submit code**
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email"
ng-model="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">department</label>
<div class="col-md-4">
<input type="text" class="form-control" name="department"
ng-model="department" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
<body>
<div ng-app = "myApp" ng-controller="myCtrl">
<div class = "form-group" >
<form ng-submit="addStudent()" class = "student-form">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="user.name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="user.email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="user.dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = ""table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</body>
JS:
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.user = {};
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push($scope.user);
$scope.user = {};
};
});
</script>
Easy way to do the same problem.By creating object.
I'm trying to load a second controller to populate a select in my view, but it won't work.
Here's my code:
app.js
(function() {
'use strict';
angular
.module('app.lazyload')
.constant('APP_REQUIRES', {
scripts: {
'modernizr': ['vendor/modernizr/modernizr.custom.js'],
'icons': ['vendor/fontawesome/css/font-awesome.min.css',
'vendor/simple-line-icons/css/simple-line-icons.css'],
'companiesCtrl': ['app/js/modules/companies/data.js','app/js/modules/companies/controller.js'],
'companyDetailCtrl': ['app/js/modules/companies/data.js','app/js/modules/companies/controller_detail.js'],
'documentTypeCtrl': ['app/js/modules/document_type/data.js','app/js/modules/document_type/controller.js']
});
})();
////////////////////////////////////
.state('app.companies.detail', {
url :'/companies.detail/',
title : 'Company',
templateUrl : helper.basepath('companies/companies.detail.html'),
resolve : helper.resolveFor('companyDetailCtrl','documentTypeCtrl'),
controller : ('companyDetailCtrl')
})
.state('app.companies.document_type', {
url :'/companies.detail/',
title : 'Document Type',
templateUrl : helper.basepath('companies/companies.detail.html'),
controller : ('documentTypeCtrl')
})
company.detail/controller.js
(function() {
'use strict';
angular
.module('assets4')
.controller('companyDetailCtrl', companyDetailCtrl);
companyDetailCtrl.$inject = ['$scope','Data','$log', '$state'];
function companyDetailCtrl($scope, Data, $log, $state){
$log.log('Controller > companyDetailCtrl loaded');
Data.get('companies/'+$scope.company_id).then(function(data){
$scope.companyDetail = data[0];
//$log.log($scope.companyDetail);
});
};
})();
document_type/controller.js (this file is loaded correctly in browser)
(function() {
'use strict';
angular
.module('assets4')
.controller('documentTypeCtrl',documentTypeCtrl)
documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];
function documentTypeCtrl($scope, DataDocType, $log, $state) {
DataDocType.get('document_type').then(function(data){
$scope.document_type = data;
$log.log('Controller > documentTypeCtrl loaded');
});
};
})();
EDIT > added companies/controller.js
(function() {
'use strict';
angular
.module('assets4')
.controller('companiesCtrl', companiesCtrl)
companiesCtrl.$inject = ['$scope','Data','$log', '$state'];
function companiesCtrl($scope, Data, $log, $state) {
Data.get('companies').then(function(data){
$scope.companies = data;
$log.log('Controller > companiesCtrl loaded');
});
$scope.onRowClick = function(company_id){
$scope.company_id = company_id;
$state.go('app.companies.detail');
};
};
})();
EDIT > added companies.html
<div class="row" ng-controller="PanelsCtrl as panel">
<div class="col-xs-12">
<div class="panel panel-default" >
<div class="panel-heading">
<paneltool tool-refresh="traditional"></paneltool>
</div>
<div class="panel-body">
<div ui-view>
<div class="table-responsive">
<table id="companiesGrid" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>{{ 'companies.grid.NAME' | translate }}</th>
<th>{{ 'companies.grid.DOCUMENT' | translate }}</th>
<th>{{ 'companies.grid.ADDRESS' | translate }}</th>
<th>{{ 'companies.grid.PHONE1' | translate }}</th>
<th>{{ 'companies.grid.EMAIL' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in companies track by $index" ng-class="{'active': company.company_id}" ng-click="onRowClick(company.company_id)">
<td>{{company.company_id}}</td>
<td>{{company.company_name}}</td>
<td>{{company.company_document_number}}</td>
<td>{{company.company_address}}</td>
<td>{{company.company_phone1}}</td>
<td>{{company.company_email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT > added companies.detail.html
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.ID' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_id" disabled/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.NAME' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_name"/>
</div>
</div>
<div class="form-group mb">
<label class="col-lg-2 control-label">Chosen Ajax</label>
<div class="col-lg-10">
<select chosen="" ng-model="document_type" ng-options="s for s in form.states" width="'100%'" class="chosen-select input-md">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.DOCUMENT' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_document_number"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.ADDRESS' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_address"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.PHONE1' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_phone1"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.PHONE2' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_phone2"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.WEBSITE' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_website"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.EMAIL' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_email"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.LOGO' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_logor" disabled/>
</div>
</div>
<button type="submit" class="btn btn-lg btn-info" onclick="history.back()">Volver</button>
<button type="submit" class="btn btn-lg btn-info" onclick="">Guardar</button>
<button type="submit" class="btn btn-lg btn-info" onclick="">Eliminar</button>
</form>
app.company.detail is loading perfectly, populating complete form.
I've tried using ng-controller as well but nothing happens.
I can't reach this code
$log.log('Controller > documentTypeCtrl loaded');
What am I doing wrong?
I'm very new to Angularjs.
Thanks.
I loaded controllers in route configuration.
I think you are missing "$state" in the inject statement:
INCORRECT
documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];
CORRECT
documentTypeCtrl.$inject = ['$scope','DataDocType','$log','$state'];
So I am trying to build a table that takes the form data entered and is stored on the client and pushes each input property into a group to create an object. From there, the table is build using ng-repeat. Code started is below, but nothing is happening. Can anyone assist?
<form class="addClaim" ng-submit="submitClaim(claimInfo)">
<div class="form-group">
<label for="beneSelect">Select your benefit</label>
<select class="form-control" id="beneSelect" >
<option ng-repeat="descr in claim.claimBenes" data-ng-model="claimInfo.providerName">{{ descr.descr }}</option>
</select>
</div>
<div class="form-group">
<label for="start">Date of Service</label>
<div>
<input type="text" class="form-control" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 240px;">
<span>To</span>
<input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 240px;">
</div>
</div>
<div class="form-group">
<label for="providerName">Provider Name</label>
<input type="text" class="form-control" id="providerName" data-ng-model="claimInfo.provider">
</div>
<div class="form-group">
<label for="forWhom">For Whom</label>
<input type="text" class="form-control" id="forWhom" data-ng-model="claimInfo.who">
</div>
<div class="form-group" ng-show="claimInfo.benefCode == 'HCFSA'">
<label for="age">Age</label>
<input type="text" class="form-control" id="age" data-ng-model="claimInfo.who">
</div>
<div class="form-group">
<label for="claimAmount">Amount</label>
<input type="text" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount">
</div>
<div class="form-group">
<label for="claimComment">Comments</label>
<textarea class="form-control" rows="5" id="claimComment" data-ng-model="claimInfo.comments"></textarea>
</div>
<div class="form-group">
<label class="control-label"></label>
<div>
<input type="button" class="btn btn-primary" ng-click="saveClaim()" value="add claim" style="float: right;">
</div>
</div>
</form>
The table:
<div class="claimedTable" style="background-color: #ffffff; color: black;">
<table class="table">
<thead>
<tr>
<th>service date</th>
<th>provider</th>
<th>amount</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in claimSubmit">
<td>{{ claimInfo.fromDate }}</td>
<td>{{ claimInfo.provider }}</td>
<td>{{ claimInfo.amount }}</td>
<td><i class="fa fa-pencil-square-o"></i></td>
<td><i class="fa fa-trash-o"></i></td>
</tr>
</tbody>
</table>
</div>
And controller:
$scope.claim = [];
claimsService.getClaim().then(function (results) {
$scope.claim = results.data;
});
// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {
id: "",
benefitId: "",
isSecIns: "",
isNoResId: "",
expenseTypeId: "",
fromDate: "",
toDate: "",
provider: "",
who: "",
depId: "",
age: "",
amount: "",
comments: "",
isOffset: ""
};
$scope.saveClaim = function() {
$scope.claimsSubmit.push($scope.claimInfo);
//clears scope so form is empty
$scope.claimInfo = {};
}
When I enter data into the fields and click submit, nothing ever leaves nor does it post to the table. The reason I want as an object versus an array is because the table may have multiple line items depending on how many times the form is field out and submitted.
Seems somewhere simple I am going wrong, but cannot figure where. Any help please?
Thanks much.
You have a few issues in your code. Here it is cleaned up a bit...
HTML
<form class="addClaim"> // ng-submit not needed in form tag
ng-repeat bindings should be item. not claimsSubmit.
<tr ng-repeat="item in claimsSubmit">
<td>{{ item.fromDate }}</td>
<td>{{ item.provider }}</td>
<td>{{ item.amount }}</td>
<td><i class="fa fa-pencil-square-o"></i></td>
<td><i class="fa fa-trash-o"></i></td>
</tr>
Controller
$scope.claim = []; // This can be removed.
claimsService.getClaim().then(function (results) {
$scope.claim = results.data;
});
// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {}; // This just needs to create an object.
$scope.saveClaim = function() {
$scope.claimsSubmit.push($scope.claimInfo);
//clears scope so form is empty
$scope.claimInfo = {};
}
This should be enough to get the form populating the table for you. There is obviously form data missing from the table but it will get you going in the right direction.