I built a Reddit clone in Angular and Rails following this guide. I've been playing around with the CSS to get the upvote and downvote arrows in the right spot. I guess overriding the Bootstrap wasn't a good idea because I can't seem to get my ng-click to fire when I click the arrow anymore (it worked fine before, didn't change the js at all). Here's the relevant bits:
HTML:
<div class="row">
<div class="col-md-1 small-right-gutters small-col">
<div class="row">
<div class="col-md-1 small-right-gutters">
<div class="glyphicon glyphicon-arrow-up" ng-click="addUpvote(post)"></div>
<div class="glyphicon glyphicon-arrow-down"></div>
</div>
<div class="col-md-1 vert-center">
{{post.upvotes}}
</div>
</div>
</div>
<div class="col-md-9 big-col vert-center">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</div>
<div class="col-md-2 text-right">
<div>
<small>{{ post.comments.length }} comment<span ng-hide="post.comments.length==1">s</span></small>
</div>
<div>
<small>posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a></small>
</div>
</div>
</div>
CSS:
.small-right-gutters {
padding-right: 2px;
}
.small-col {
width: 40px;
}
.big-col {
width: 925px;
font-size:20px;
margin-left: 10px;
}
.vert-center {
height: 40px;
line-height: 40px;
}
Angular controller:
$scope.addUpvote = function (post) {
postFactory.upvotePost(post);
};
$scope.addDownvote = function (post) {
postFactory.downvotePost(post);
};
Angular factory:
upvotePost: function(post) {
return $http.put('/posts/' + post.id + '/upvote.json').success(function (data) {
post.upvotes += 1;
});
},
downvotePost: function(post) {
return $http.put('/posts/' + post.id + '/downvote.json').success(function (data) {
post.upvotes -= 1;
});
},
Any ideas why this is happening?
If you add z-index: 1; on your .glyphicon it works!
Related
I have a small tool for scrum teams to track people in the meeting. Now we are more people, one team is added and right now it seems more logical to re-arrange the elements.
Now if you click on team1/team2/team3 button, the names are sorted in 3 columns and next to each other. I want to change this, to 3 columns, but every team will have it's own column. So, team1 names will fill up the first column and the names in this team will come under each other. After that if I click on team2, the names of team2 will fill up the second column and the team3 will fill up the third column. I assume on every team button click the script should create one column and fill up this column, on the second team button click it will again create one column next to the first also on the third time. Is this possible? Thank you very much.
This is the one page working version, all names are randomly generated, completely anonym:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Team Members</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
.alert.member-clicked {
text-decoration-line: line-through;
background-color: #ddd;
border-color: #ddd;
}
.alert.member-absent {
text-decoration-line: line-through;
background-color: #f8d7da;
border-color: #f8d7da;
}
.copyright {
margin-top: 10px;
margin-right: 10px;
text-align: right;
}
.form-inline.form-members .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline.form-members .input-group .input-group-btn {
width: auto;
}
h2 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div class="container">
<h2 class="text text-success text-center">My Team Members</h2>
<div id="memberlist" class="row"></div>
</div>
<footer class="footer">
<div class="container">
<!-- Input for members -->
<div class="form-inline form-members">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
<div class="input-group-btn">
<button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
<button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
<button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
<button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
</div>
<div class="form-group hidden">
<label for="exampleFormControlTextarea1">Team1</label>
<textarea class="form-control" id="team1" rows="9">
Bentley Parrish
Hunter Pineda
Ammar Burks
Tanya Vang
Aimie Ewing
Anabella Chan
Amayah Sparks
Priyanka Cooke
Boyd Pacheco
Mai Lynch
</textarea>
<label for="exampleFormControlTextarea1">Team2</label>
<textarea class="form-control" id="team2" rows="9">
Alan Rangel
Ikra Knowles
Chelsea Avalos
Aysha Glenn
Margaret Couch
Effie Corbett
Yassin Arias
Caspian Rice
</textarea>
<label for="exampleFormControlTextarea1">Team3</label>
<textarea class="form-control" id="team3" rows="9">
Armani Curran
Monica Kemp
Nur Davis
Hashir Dodson
Ty Hagan
Aariz Rowley
</textarea>
</div>
</div>
<p class="copyright">Created by: Me • me#me.com • ver 1.5</p>
</footer>
</center>
<script>
$(document).ready(function() {
var memberList = $("#memberlist");
memberList.on("click", ".alert", function () {
$(this).toggleClass("member-clicked");
});
memberList.on("click", ".close", function () {
var memberColumn = $(this).parent().parent();
memberColumn.fadeOut();
});
$(".btn-addmember").click(function () {
var newMember = $("#text").val().trim();
if (newMember) {
addMember(newMember);
} else {
alert("Please, enter the name of the member");
}
$("#text").val("");
});
$(".btn[data-team]").click(function () {
addTeam($(this).data("team"));
});
function addMember(member) {
member = member.trim();
if (member) {
memberList.append(
`<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div></div>`
);
}
}
function addTeam(id) {
var team = $("#" + id)
.val()
.trim();
if (team) {
var members = team.split("\n");
console.log(members);
for (var i = 0; i < members.length; i++) {
addMember(members[i]);
}
}
}
$(document).on('dblclick', '.alert', function() {
$(this).toggleClass("member-absent");
});
});
</script>
</body>
</html>
I think you need to use 3 member lists instead of one.
var memberList1 = $("#listteam1");
var memberList2 = $("#listteam2");
var memberList3 = $("#listteam3");
that means the layout will change:
<div class="row">
<div class="col-xs-6 col-sm-4">
<h3>Team 1</h3>
<div class="column" id="listteam1">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 2</h3>
<div class="column" id="listteam2">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 3</h3>
<div class="column" id="listteam3">
</div>
</div>
</div>
also, addMember needs to take the list name as an argument
function addMember(member, list) {
member = member.trim();
if (member) {
$("#list" + list).append(
`<div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div>`
);
}
}
please find the whole script here: https://pastebin.com/VQEVKCaF
I really don't know what to do about it.
I'll try to explain:
I need to output value "senderName" in block of chat. For it, iteration over the arrays is used on mounted method. There are successfully output in console and Vue debagger extension, but the field for name is empty.If you enter text instead of the {{}} template, then everything is displayed.
This is html code
<div
v-for="chat in chats"
:key="chat.id"
#click="changeChat(chat.private_chat_id)"
class="card chat-chart"
style="
width: 100%;
margin-bottom: 1px;
box-shadow: none;
border: 1px solid #eee;
"
>
<div
class="card-body mt--3"
style="
height: 100px !important;
padding: 0.8rem i !important;
"
>
<div class="row align-items-center justify-content-start">
<div class="col-2">
<span class="avatar avatar-sm rounded-circle">
<img
src="https://ptetutorials.com/images/user-profile.png"
alt="avatar"
/>
</span>
</div>
<div class="col-8 d-flex align-items-center">
<h4 class="card-title align-self-center mb-0">
{{ chat.senderName }}
</h4>
</div>
</div>
<div
class="row align-items-center justify-content-end mt--4 mb-4"
style="height: 1px"
>
<div
v-if="chat.unreadCount > 0"
class="d-inline-block rounded-circle bg-success text-light ml-2 p-1"
style="
color: white !important;
font-weight: bold;
width: 30px;
height: 30px;
"
>
<!-- <p
class="text-center font-weight-bold"
style="line-height: 1.4"
>
{{ (chat.unreadCount > 99) ? 99 : chat.unreadCount
}}
</p> -->
</div>
</div>
<div
class="row align-items-center justify-content-start ml-1"
>
<p>chat.msg</p>
</div>
</div>
</div>
And here mounted method
mounted() {
// Get all chats for user with id - userId
axios
.get("/api/users/" + this.userId + "/privatechat")
.then((res) => {
appChats.chats = res.data;
// console.log(this.chats);
// Itereate array of user's private chats
for (let i = 0; i <= res.data.length; i++) {
if (!res.data[i]) {
continue;
} else {
// console.log(res.data[i]);
let chatObj = res.data[i];
// Get info of the chat with its id
axios
.get("/api/privatechat/" + chatObj.private_chat_id)
.then((response) => {
// console.log(response.data);
for (values of response.data) {
// If user's id of the chat equals id of our user then skip
if (values.user_id == appChats.userId) continue;
else {
// console.log(values.user_id);
appChats.chats[i]["senderId"] = values.user_id;
// Get userName of our interlocutor
axios
.get("/api/users/" + values.user_id)
.then((r) => {
appChats.chats[i]["senderName"] =
r.data[0].username;
});
}
}
});
}
}
});
},
There are some pics:
https://i.imgur.com/tSKBIeK.png
https://i.imgur.com/nxbhOvE.png // this pic is about Vue js extension
I am using Vue JS and Bulma Frameworks. To show the modal I am using .
I have list of items(10) which is displayed in a For Loop. In every item I have a button which opens the sweet modal. No matter which button I click, the modal is displayed at the top of the page always. Can anyone help me how to show the modal near to the clicked button?
Template index.html
<div class="content column is-full-mobile no-devices-found-wraper">
<div class="columns is-mobile">
<div class="column is-full-mobile ">
<div class="columns is-mobile is-marginless">
<div class="column is-half-mobile padding-bottom-
zero padding-top-3">mobile devices:</div>
<div class="column padding-bottom-zero padding-top-3">
<a #click.stop.prevent="openDeviceModal()"
class="add_icon is-pulled-right add-location-btn level-
item">
<i class="fa fa-plus"></i>ADD ITEMS
</a>
</div>
</div>
</div>
</div>
</div>
sweet-modal outside for loop
<sweet-modal class="Add mobile device" ref="deviceAddLocation"
von:close="closeModal">
<form #submit.prevent="saveDeviceToLocation">
<div class="field add-devices-height-with-error">
<label class="label" >mobile device Name</label>
</div>
</form>
</sweet-modal>
//index.vue-- openDeviceModal()//
openDeviceModal() {
this.isModalOpen = true;
this.$refs.deviceAddLocation.blocking = true;
this.$refs.deviceAddLocation.open();
}
//CSS//
.isModalOpen {
height: 100vh;
overflow: hidden;
}
.sweet-modal {
overflow: inherit;
}
.sweet-modal-overlay {
background: transparent !important;
height: 100% !important;
}
.sweet-modal .sweet-content {
padding-top: 10px;
}
.sweet-modal.is-visible {
transform: translate(-62%, -50%) !important
}
sweet-modal .sweet-box-actions {
top: 15px !important;
}
This one has been driving me nuts and I have no clue what the problem is.
I have a quiz that has different kinds of question types (multiple choice, type in the answer, etc) and for each question, I set the innerHTML using a function and then populate it accordingly.
If it's a textbox question, I'd like to automatically set the focus to it. I've tried using javascript, jQuery, and the console window from within Chrome. I've set the tab index to -1. I've looked on this website, but none of the solutions seem to work.
Here's the code:
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>
So I am developing this app in which i want to apply pagination to list of templates.
template objects are stored in the list.
I am displaying thumbnails of templates on the page and I want to apply pagination for this page.
So far I have tried following solution but it didn't work.
It displaying the pagination correctly but when I click on the link its not updating the contents of the page.
list.html
<div class="container">
<div class="homepage-header">
<h2 class="homepage-title text-center wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown; -webkit-animation-name: fadeInDown;"> TEMPLATES </h2>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" style="text-align: left">
<div class="form-inline">
<div class="form-group has-feedback has-clear">
<input type="text" class="form-control" ng-model="searchParam" ng-model-options="{ debounce: 400 }" placeholder="Search template ..."
/>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="searchParam = '';
retreivePageData(0);" ng-show="searchParam" style="pointer-events: auto; "></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6" style="text-align: right; vertical-align: middle; padding-right: 30px;">
<div class="form-inline">
{{selectedOption}}
<i class="fa fa-toggle-on fa-2x active" ng-if="status == true" ng-click="changeStatus();" title="Show component based templates"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();" title="Show image based templates"></i>
<button ng-click="newTemplateConfig()" class="btn btn-primary btn-xs" title="Add new template"><i class="fa fa-plus-circle fa-fw"></i>New Template</button>
</div>
</div>
</div>
<div class="homepage-ui-showcase-2-css row wow zoomIn animated" style="height: 402px;padding: 5px 0px; visibility: visible; animation-name: zoomIn; -webkit-animation-name: zoomIn;">
<div ng-repeat="(templateIndex, templateModel) in templatesList | filter:searchParam | limitTo: itemsPerPage">
<div class="active col-md-3 col-lg-3 col-sm-6 col-xs-12 mix design painting" style="display: inline-block;padding-top: 10px;"
ng-init="visible=false" ng-mouseover="visible=true" ng-mouseleave="visible=false">
<div class="portfolio-item shadow-effect-1 boxShadow" style="max-width: 250px;padding:0.3px;border:2px dotted #bebede;cursor: pointer">
<div class="mainBadge">
<kbd>{{templateModel.badge}}</kbd>
</div>
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="false" style="height: 130px;" ui-sref="/designer/:pageId({pageId:templateModel.id})" class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-puzzle-piece fa-4x"></i>
</div>
<div ng-switch-when="true" style="height: 130px;" ui-sref="annotator/:annotatedTemplateId({annotatedTemplateId:templateModel.id})"
class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-file-image-o fa-4x"></i>
</div>
</div>
<div class="portfolio-item-content" title="{{templateModel.name}}">
<h3 class="header" style="font-size: 13px;text-align: center;display:inline;">
{{templateModel.name}}
</h3>
<small class="pull-right" ng-show="visible" style="display: inline; padding-top: 4px">
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="true" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'A',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
<div ng-switch-when="false" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'T',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
</div>
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row " style="margin-top: 10px; padding-top:0px;">
<div class="pagination-div pull-right" style="">
<!--<pagination class="pull-right" total-items="templatesList.length" ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage"></pagination> -->
<uib-pagination total-items="templatesList.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" items-per-page="itemsPerPage" boundary-link-numbers="true"></uib-pagination>
</div>
</div>
</div>
list.controller.js
'use strict';
angular.module('rapid').controller('HomeListController',
function($scope, $rootScope, $window, $modal, ServiceFactory, toaster, ReadFileService, AnnotationService, AnnotateService, DocumentService) {
$scope.templatesList = [];
$scope.selectedOption = 'All';
$scope.annotateTemplateMeta = [];
$scope.rapidTemplateMeta = [];
$scope.maxSize = 5;
$scope.init = function() {
$scope.status = true;
$scope.selectedOption = "Image Based";
$scope.retrieveTemplates($scope.status);
$scope.currentPage = 1;
};
$scope.changeStatus = function(){
$scope.status = !$scope.status;
$scope.retrieveTemplates($scope.status);
};
$scope.retrieveTemplates = function(selectedOption) {
$scope.templatesList = [];
if(selectedOption) {
$scope.selectedOption = "Image Based";
$scope.fetchAnnotationTemplates("Annotate");
} else {
$scope.selectedOption = "Component Based";
$scope.fetchRapidTemplates("Rapid");
}
};
$scope.fetchAnnotationTemplates = function(selectedOption) {
AnnotateService.get().$promise.then(function(result) {
$scope.annotateTemplateMeta = result[0];
console.log('Annotated template count :: ' + result[0].length);
if (selectedOption === 'All') {
$scope.fetchRapidTemplates(selectedOption);
} else {
$scope.prepareTemplateList(selectedOption);
}
});
};
$scope.fetchRapidTemplates = function(selectedOption) {
ServiceFactory.PagesService.getAllPages().$promise.then(function(result) {
$scope.rapidTemplateMeta = result[0];
console.log('Rapid template count :: ' + result[0].length);
$scope.prepareTemplateList(selectedOption);
});
};
$scope.prepareTemplateList = function(selectedOption) {
$scope.itemsPerPage = 1;
var getPaginatedTemplateList = 'getList';
$scope.currentPage = 0;
if (selectedOption === 'Annotate') {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
} else if (selectedOption === 'Rapid') {
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
//alert('Rapid count '+selectedOption + $rootScope.rapidTemplateMeta.length);
} else {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
$scope.totalItems = $scope.templatesList.length;
$scope.maxSize = 5;
}
//$scope.retreivePageData(0);
};
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
alert('Page changed to: ' + $scope.currentPage);
});
};
$scope.newTemplateConfig = function (size) {
var modalInstance = $modal.open({
backdrop: 'static',
keyboard: false,
animation: $scope.animationsEnabled,
templateUrl: 'scripts/app/home/modal/template.modal.html',
controller: 'TemplateModalCtrl',
size: size,
resolve: {templateModel: function () {
return null;
},
title: function () {
return 'Create New Template';
},
templateType: function() {
if($scope.status) {
return 'Annotate';
} else {
return 'Rapid'
}
}
}
});
modalInstance.result.then(function (saveAnnotatedTemplateConfig) {
alert('modal result')
//$scope.saveAnnotatedTemplateConfig(saveAnnotatedTemplateConfig.templateConfigModel);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
$scope.init();
});
Is there anything wrong with my code?
Please provide some inputs on this.
You can use ui-grid directive to solve your pagination problem.
Please refer to the ui-grid API.
Checkout these 2 plunkers :
Plunker 1
Plunker 2