We Keep Coding

Table disappears after adding an item

i'm using datatables to display a list of project names and I'm using a button to add an item to the displayed array, but when i do so, my table disappears.
Here's the code:
view.html
<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: #00b3ee; color: white; border:none">
<th style="text-align: center">Nom</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in vm.project.projects">
<td style="width: 90%; vertical-align: middle">{{project}}</td>
<td align="center" style="vertical-align: middle">
<button data-toggle="modal" ng-click="vm.setProject(project)"
data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
<i class="fa fa-trash"> </i>Supprimer
</button>
</td>
</tr>
</tbody>
</table>
controller.js
vm.add = () => vm.project.projects.push('new project');
fetchProject().then(result => {
vm.project = result;
// vm.project = {
// projects: [
// "project1",
// "project2",
// "project3",
// "project4"
// ],
// etc...
// }
vm.project.projects.push("newProject"); //it's working here, which is normal
//init datatable
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap();
vm.dtColumnDefs = [];
for (var i = 0; i < 2; i++) {
if (i == 1) {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
} else {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
}
}
})
I've tried using objects instead of strings.. doesn't work either. I don't know what's going on.
I cannot use server side processing. This has to be done using the angular way.

Ok, so i found it :
For some reason, it worked when i initialized vm.project.project before the promise call. So i created the vm.project object, and i added the project property to it by adding an empty array. I was then able to add items without having my table disappearing.

Div not showing on ng-click of element returned by custom directive

I have created a directive in which a table html is returned successfully. One of the columns is anchor link <td><a ng-click="showLogDiv()">Show Modified Data</a></td> on whose click i want to show a div containing further data belonging to that row but it doesnot show.
//logdetails.html - the templateUrl proprerty of my directive
<div>
<table class="table table-hover table-responsive">
<thead class="table-thead">
<tr style="background-color:#56a7d6">
<th>AccessLogId</th>
<th>EntityName</th>
<th>EntityId</th>
<th>RequestType</th>
<th>Modified Data</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in viewData.logdata">
<td>{{value.AccessLogId}}</td>
<td>{{value.EntityName}}</td>
<td>{{value.EntityId}}</td>
<td>{{value.RequestType}}</td>
<!--<td><a ng-click="showLogDetails({{value.ModifiedData| json}})">Show Modified Data</a></td>-->
<td><a ng-click="showLogDiv()">Show Modified Data</a></td>
<td>{{value.CreatedDate | date:'medium'}}</td>
</tr>
</tbody>
</table>
<!--<div ng-show="divShow">Hello</div> I want to show {{value.ModifiedData| json}} contents here but even hardcoded Hello value not shown -->
<div ng-show="divShow">Hello</div>
</div>
In controller i have
$scope.divShow = false;
$scope.showLogDiv = function () {
alert($scope.divShow);
$scope.divShow = true;
alert($scope.divShow);
};
My directive
.directive("myActivityLogs", function () {
return {
restrict: 'E',
replace: 'true',
//template: '<div></div>',
//template: '<b>{{viewData.logdata[1].ModifiedData}}</b>'
templateUrl: 'app/modules/appScreen/logdetails.html'
//scope: {
// logsData:'='
//},
//link: function (scope, element, attrs) {
//link: function () {
// alert(viewData.logdata);
//}
};
});
How to hide/show part of html returned by directive and also how can i bind data to that part?
I am new to angularjs and nothing makes sense right now so maybe i am doing things wrong way so please explain in detail it would be very helpful.

One way to do this is to use a directive controller. You can change your directive like this:
.directive("myDirective", function() {
return {
restrict: 'E',
replace: 'true',
templateUrl: './logdetails.html',
scope: {
viewData: '='
},
controller: function($scope) {
$scope.divShow = false;
this.showLogDiv = function() {
$scope.divShow = true;
};
},
controllerAs: 'ctrl'
};
})
And then change your template HTML as the following so that it uses the controller:
<div>
<table class="table table-hover table-responsive">
<thead class="table-thead">
<tr style="background-color:#56a7d6">
<th>AccessLogId</th>
<th>EntityName</th>
<th>EntityId</th>
<th>RequestType</th>
<th>Modified Data</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in viewData.logdata">
<td>{{value.AccessLogId}}</td>
<td>{{value.EntityName}}</td>
<td>{{value.EntityId}}</td>
<td>{{value.RequestType}}</td>
<td><a href ng-click="ctrl.showLogDiv()">Show Modified Data</a></td>
<td>{{value.CreatedDate | date:'medium'}}</td>
</tr>
</tbody>
</table>
<div ng-show="divShow">Hello</div>
</div>
Notice that I've used <a href ng-click="ctrl.showLogDiv()">. You can refer to this working plunker to know more.

How to access a specific $scope variable when loading a different .html file?

First of all, sorry about the title, I just wan't sure how to word this question.
So I'm making a task manager using AngularJS. I have a form for the user to fill with the details when he's creating a new task. I use ng-model to save these values to my $scope. Here's how I save them:
$scope.add = function(tasks)
{
{
$scope.tasks.push({
'id': tasks.id,
'title': tasks.title,
'start_day': tasks.start_day,
'start_time':tasks.start_time,
'start_date':tasks.start_day + " " + tasks.start_time,
'end_day': tasks.end_day,
'end_time': tasks.end_time,
'end_date':tasks.end_day + " " + tasks.end_time,
'type': tasks.type,
'description': tasks.description
});
localStorage.setItem('tasks',JSON.stringify($scope.tasks));
}
};
Then, as you can see, I save these values to the local storage. I have an array called tasks with all the tasks the user created. I then display these tasks in a table with this:
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
Then, the objective is that you can click any row and load a new page with all the task details. I do this with the function details(), which has the following code:
$scope.details = function (task)
{
$window.location.href = 'table.html';
}
This loads the file table.html and what I want is to display in this page all the task details, i.e., the ID, the title, the description, etc.
What I don't know is how to only display the specific task that you click on. For example, if I click on the row with the task "Todo #1", I only want to see the details for the task "Todo #1".

to access this variable in other html you can use factory or service like this
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {
};
});
})();
Now datafactory is factory we need to inject this module(dataModule) in your module and factory(datafactory) in controller
Now how to use this factory
in your function
$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}
Now this datafactory stores your variable that can we used in any controller and later on also you can use this factory to store any such variable for global use
like this datafactory.Myvariable ="hasd"//assign here
Now to use this variable
Suppose you want to use this variable in another page table.html there on
// in html ng-init ="$scopeInit()"
in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask
suppose html looks something like this
<div ng-controller ="my-controller" ng-init ="$scopeInit()">
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
<div>
//in controller
$scopeInit =function(){
$scope.task =datafactory.currentTask
}
//$scope.task contains required array and hence table can be created

How to make dynamic content-editable table using angular JS?

Caveat: I've just started with client side scripting and Angular JS is the first thing I'm learning and now I feel I should've started with javascript.
PS: I don't wanna use any third party libraries. I wanna learn to code.
Anyway,I have dynamic table which I want to make editable using content-editable=true attribute of HTML.
Problem: How to I get the edited data? whenever I click on submit and pass the this object to the check() function. I doesn't contain edited values. is there a possible way to pass only edited value if it's dirty. It has pagination so If g to the next page the edited values are gone. I know I've give unique Id to every td element with $Index concatenated to it. But I don't know how should I proceed.
Any help or guidance will be appreciated. Controllers and others are defined in my route.
<div>
<form ng-submit="check(this)">
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="data in currentItems">
<td contenteditable="true >{{data.EmpNo}}</td>
<td contenteditable="true">{{data.isActive}}</td>
<td contenteditable="true">{{data.balance}}</td>
<td contenteditable="true">{{data.age}}</td>
<td contenteditable="true">{{data.eyeColor}}</td>
<td contenteditable="true">{{data.fname}}</td>
</tr>
</tbody>
<tfoot>
<td>
<div class="pagination pull-right">
<li ng-class="{'disabled': previousPage}">
<a ng-click="previousPage()" >Previous</a>
</li>
<li ng-repeat="page in pageLengthArray track by $index">
<a ng-click="pagination($index)">{{$index+1}} </a>
</li>
<li disabled="disabled">
<a ng-click="nextPage()" ng-class="{'disabled':nextPage}>Next </a>
</li>
</div>
</td>
</tfoot>
</table>
<input type="submit" value="Submit">
</form>
$scope.currentPage=0;
$scope.pageSize=10;
$scope.currentItems;
$scope.tableData;
$http.get('../json/generated.json').then(function(response){
$scope.tableData=response.data;
$scope.pageLength=Math.ceil($scope.tableData.length/$scope.pageSize);
$scope.currentItems=$scope.tableData.slice($scope.currentPage,$scope.pageSize);
$scope.pageLengthArray= new Array($scope.pageLength);
});
$scope.pagination=function(currentPage){ $scope.currentItems=$scope.tableData.slice($scope.pageSize*currentPage,$scope.pageSize*currentPage+$scope.pageSize);
$scope.currentPage=currentPage;
}
$scope.nextPage=function nextPage(argument) {
$scope.currentPage++; $scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
}
$scope.previousPage=function previousPage(argument) {
$scope.currentPage--;
$scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
}

In the usual case, you can not get a change model for contenteditabe because to change the model used ngModel.
But we can create a directive that we have updated the value of the model.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope, $timeout) {
$scope.data = {
EmpNo: "123"
};
})
.directive('contenteditable', function($timeout) {
return {
restrict: "A",
priority: 1000,
scope: {
ngModel: "="
},
link: function(scope, element) {
element.html(scope.ngModel);
element.on('focus blur keyup paste input', function() {
scope.ngModel = element.text();
scope.$apply();
return element;
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<table>
<tr>
<td ng-model="data.EmpNo" contenteditable="true"></td>
</tr>
</table>
<pre>{{data|json}}</pre>
</div>
</div>

I would store any object that gets modified in a seperate array using the ng-keyup directive. When the form is submitted, you will have an array of only elements which have been modified. You may have some UX issues if your pagination is done by server as when you change page and come back, it will show your old data, but hopefully this helps.
$scope.check = function () {
// check modifiedItems
console.log(modifiedItems);
};
// store modified objects in a seperate array
var modifiedItems = [];
$scope.modifyItem = function (data) {
// check if data has already been modified and splice it first
for(var i = 0, j = modifiedItems.length; i < j; i++) {
var currentItem = modifiedItems[i];
if (currentItem.id === data.id) {
modifiedItems.splice(i, 1);
break;
}
}
// add to modified
modifiedItems.push(data);
console.log('modifiedItems: ', modifiedItems);
};
HTML
<form ng-submit="check()">
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="data in currentItems">
<td ng-repeat="(key, value) in data" contenteditable="true"
ng-keyup="modifyItem(data)">
{{data[key]}}
</td>
</tr>
</tbody>
<tfoot>
</table>
<input type="submit" value="Submit">
</form>

angularjs ng-repeat in a modal with ng-if

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.

If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">

Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.