Dynamic Table using Angularjs - javascript

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.

Related

Search filter in angular js

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.

how get value input use jquery

I have 2 forms: form1 and form2. form2 is hidden and when I click on the validation button, form1 disappears and form2 appears. form1 contains an input1. When I click on the validation button, I want the value of Nameinput1 to be put after "name:" on form2., someone tells me where is the error
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
form 2:
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#name').val();
alert(name);
$('#name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
Because 2 form have same id with name, you need use $('#form2 #name').text(value);
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
#form2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:

Sum of properties in an object array AngularJS

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);
}

AngularJS: radio buttons aren't checked by default

I'm coding some radio buttons in angular, but I cannot make one of the radios appears marked as default.
This is my code:
<!-- language: lang-js -->
//And this is the JavaSctipt:
$scope.locationLookup = 1;
$scope.updateDropdownValuesBreedingLocation = function() { // Change state for breeding
// location radio
$scope.dropdownValues = ($scope.localData.useFavorites) ? $scope.variableDefinition.possibleValuesFavorite : $scope.variableDefinition.possibleValues;
$scope.locationLookup = 1;
};
$scope.updateDropdownValuesAllLocation = function() { // Change state for all locations radio
$scope.dropdownValues = ($scope.localData.useFavorites) ? $scope.variableDefinition.allFavoriteValues : $scope.variableDefinition.allValues;
$scope.locationLookup = 2;
};
<!-- language: lang-html -->
<!-- show-setting-form-element-new.html -->
<div ng-switch="widgetType">
<div ng-switch-when="DROPDOWN">
<input type="hidden" ui-select2="dropdownOptions" class="form-control select2" ng-model="valuecontainer[targetkey]" value-as-object="false" ng-change="changefunction()" ng-disabled="blockInput"/>
<div ng-if="isLocation">
<div class="possibleValuesDiv">
<input type="radio" ng-disabled="blockInput"
ng-model="locationLookup" value=1 ng-change="updateDropdownValuesBreedingLocation()">
<span th:text="#{show.breeding.location}">Breeding locations</span>
<input type="radio" ng-disabled="blockInput"
ng-model="locationLookup" value=2 ng-change="updateDropdownValuesAllLocation()">
<span th:text="#{show.all.location}">All locations types</span>
</div>
<div class="possibleValuesDiv">
<input type="checkbox" ng-model="localData.useFavorites" ng-checked="true" ng-change="updateDropdownValuesFavorites()">
<span th:text="#{show.favorite.location}">Show only favorite locations </span>
</div>
</div>
<div ng-if="isBreedingMethod" class="possibleValuesDiv">
<!--TODO : handle rendering of breeding method dropdowns for completeness-->
</div>
</div>
<div ng-switch-when="NTEXT">
<input type="text" ng-disabled="blockInput" valid-decimal="" class="form-control numeric-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="SLIDER">
<input type="text" ng-disabled="blockInput" valid-decimal="" class="form-control numeric-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="CTEXT">
<input type="text" ng-disabled="blockInput" class="form-control character-input" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="TEXTAREA">
<textarea ng-disabled="blockInput" class="form-control character-input" rows="3" ng-model="valuecontainer[targetkey]" ng-change="changefunction()"/>
</div>
<div ng-switch-when="DATE">
<input type="text" ng-disabled="blockInput" placeholder="yyyy-mm-dd" class="form-control date-input" ng-model="valuecontainer[targetkey]" jq-datepicker="true" with-image="true" image-src="/Fieldbook/static/img/calendar.png" ng-change="changefunction()"/>
</div>
</div>
<!-- end snippet -->
And the container is this:
<!-- language: lang-html -->
<section-container th:attr="heading=#{trial.managesettings.trial.environment.specify.level}">
<div name="content">
<table datatable="ng" dt-options="dtOptions" dt-instance="nested.dtInstance"
class="table table-curved table-condensed fbk-table-with-check fbk-datatable-environments" width="100%">
<thead>
<tr>
<th data-sortable="false" class="fbk-delete-link"></th>
<th data-sortable="false" th:text="#{trial.managesettings.trial.environment.label}">Environment</th>
<th data-sortable="false" ng-repeat="key in settings.managementDetails.keys()"
ng-hide="settings.managementDetails.val(key).hidden">
{{settings.managementDetails.val(key).variable.name}}</th>
<th data-sortable="false" ng-repeat="key in settings.trialConditionDetails.keys()">
{{settings.trialConditionDetails.val(key).variable.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="environment in data.environments" ng-class="{even : $even, odd : $odd}">
<td class="fbk-delete-link fbk-table-delete-link">
<span ng-click="deleteEnvironment($index)" ng-show="data.noOfEnvironments > 1"
class="glyphicon glyphicon-minus-sign fbk-delete-sign"> </span>
</td>
<td>{{environment.managementDetailValues[TRIAL_INSTANCE_NO_INDEX]}}</td>
<td ng-repeat="key in settings.managementDetails.keys()"
ng-hide="settings.managementDetails.val(key).hidden">
<show-setting-form-element-new ng-if="isLocation" settings="settings.managementDetails" targetkey="{{key}}"
valuecontainer="environment.managementDetailValues"
changefunction="onLocationChange({key: environment.managementDetailValues[key]})"></show-setting-form-element-new>
<show-setting-form-element-new ng-if="!isLocation" settings="settings.managementDetails" targetkey="{{key}}"
valuecontainer="environment.managementDetailValues"></show-setting-form-element-new></td>
<td ng-repeat="key in settings.trialConditionDetails.keys()">
<show-setting-form-element settings="settings.trialConditionDetails" targetkey="{{key}}"
valuecontainer="environment.trialDetailValues"></show-setting-form-element></td>
</tr>
</tbody>
</table>
</div>
</section-container>
<!-- end snippet -->
Can you help me?
The most interesting is that if I put these radios outside the table, it works fine! But not inside it.

Array in ng-repeat isn't showing

I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});
Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>
Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>

Categories