I am having problems with the selected date because it's not getting the current date initially, how can I fix it?
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.name = 'World';
$scope.event = {};
$scope.day = moment();
$scope.selected = removeTime($scope.selected || moment());
$scope.month = $scope.selected.clone();
var start = $scope.selected.clone();
start.date(-6);
removeTime(start.day(0));
buildMonth($scope, start, $scope.month);
$scope.select = function(day) {
$scope.selected = day.date;
};
$scope.next = function() {
var next = $scope.month.clone();
removeTime(next.month(next.month()+1).date(0));
$scope.month.month($scope.month.month()+1);
buildMonth($scope, next, $scope.month);
};
$scope.previous = function() {
var previous = $scope.month.clone();
removeTime(previous.month(previous.month()-1).date(0));
$scope.month.month($scope.month.month()-1);
buildMonth($scope, previous, $scope.month);
};
function removeTime(date) {
return date.day(1).hour(0).minute(0).second(0).millisecond(0);
}
function buildMonth($scope, start, month) {
$scope.weeks = [];
var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
while (!done) {
$scope.weeks.push({ days: buildWeek(date.clone(), month) });
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
}
function buildWeek(date, month) {
var days = [];
for (var i = 0; i < 7; i++) {
days.push({
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
});
date = date.clone();
date.add(1, "d");
}
return days;
}
});
.border-box {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.calendar {
float: left;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: white;
width: 300px;
border: solid 1px #CCC;
margin-bottom: 10px;
}
.calendar > div.header {
float: left;
width: 100%;
background: #2875C7;
height: 40px;
color: white;
}
.calendar > div.header > * {
height: 40px;
line-height: 40px !important;
display: inline-block;
vertical-align: middle;
}
.calendar > div.header > i {
float: left;
width: 40px;
font-size: 1.125em;
font-weight: bold;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 10px;
cursor: pointer;
}
.calendar > div.header > i.fa-angle-left {
text-align: left;
}
.calendar > div.header > i.fa-angle-right {
text-align: right;
margin-left: -40px;
}
.calendar > div.header > span {
float: left;
width: 100%;
font-weight: bold;
text-transform: uppercase;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 50px;
margin-left: -40px;
text-align: center;
padding-right: 40px;
color: inherit;
}
.calendar > div.week {
float: left;
width: 100%;
border-top: solid 1px #CCC;
}
.calendar > div.week:first-child {
border-top: none;
}
.calendar > div.week > span.day {
float: left;
width: 14.28571429%;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-left: solid 1px #CCC;
font-size: 0.75em;
text-align: center;
height: 30px;
line-height: 30px !important;
display: inline-block;
vertical-align: middle;
background: white;
cursor: pointer;
color: black;
}
.calendar > div.week > span.day:first-child {
border-left: none;
}
.calendar > div.week > span.day.today {
background: #E3F2FF;
}
.calendar > div.week > span.day.different-month {
color: #C0C0C0;
}
.calendar > div.week > span.day.selected {
background: #2875C7;
color: white;
}
.calendar > div.week.names > span {
color: #2875C7;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" href="style.css" title="" type="" />
</head>
<body ng-controller="MyCtrl">
<div class="calendar">
<div class="week-days">
<span class="day">Mon</span>
<span class="day">Tue</span>
<span class="day">Wed</span>
<span class="day">Thu</span>
<span class="day">Fri</span>
<span class="day">Sat</span>
<span class="day">Sun</span>
</div>
<div class="week" ng-repeat="week in weeks">
<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>
</div>
</body>
</html>
This is my link file with my code: https://plnkr.co/edit/jag8GKsfcRvLshfm0oac?p=preview
The problem is you are setting the day of the week to monday with the call date.day(1) in the function removeTime.
Fixed be removing this:
function removeTime(date) {
return date.hour(0).minute(0).second(0).millisecond(0);
}
See updated plunker
Related
I am working on an assignment to create a multiplication table using a 2D array. This is what I came up with.
'use strict';
window.addEventListener('load', function () {
document.getElementById('number1').addEventListener('focus', inputFocus);
document.getElementById('number2').addEventListener('focus', inputFocus);
document.getElementById('btn').addEventListener('click', main);
document.getElementById('number1').focus();
});
function inputFocus() {
document.activeElement.select();
document.getElementById('error').innerText =
'Enter ' + document.activeElement.id + ' value.';
}
function getNumber() {
let multiplier = document.getElementById('number1').value;
multiplier = Number(multiplier);
return multiplier;
}
function getExpressionsNumber() {
let expressionsNumber = document.getElementById('number2').value;
expressionsNumber = Number(expressionsNumber);
return expressionsNumber;
}
// I have a good feeling that checkInput() does not work at all and is most likely redundant.
function checkInput() {
let number = document.activeElement.value;
console.log(number);
if (isNaN(number) || number.trim().lenght == 0) {
document.getElementById('error').innerText = 'Enter a number!';
return false;
}
return true;
}
function main() {
console.log('Main is called...'); // testing to see if this function is being called.
console.log(checkInput()); // testing if this function returns true...
if (checkInput()) {
document.getElementById('error').innerText = ''; // set the error message to emptry string... good.
displayExpressions(); // call the function to display the output...
}
}
function multiplication(number, expressionsNumber) {
let result = number * expressionsNumber;
return result;
}
function displayExpressions(){
let number1 = getNumber();
// console.log(number1)
let number2 = getExpressionsNumber();
// console.log(number2)
if (number1 <=0 || number2 <= 0){
document.getElementById("error").innerText = "Enter a natural number!"
}
else if(number1 >= number2 ){
document.getElementById("error").innerText = "End value must be grater than Start value!"
}
else{
let result = [];
for(let row = number1; row <= number2 + 1; row++) {
result[row] = [];
for( let column = number1; column <= number2 + 1; column++){
if( row == number1 && column > number1){
result[row][column] = "<th>" + (column-1) + "</th>";
}
else if(column == number1 && row > number1){
result[row][column] = "<th>" + (row - 1) + "</th>";
}
else if (row == number1 && column == number1){
result [row][column] = "<th>" + "x" + "</th>";
}
else{
result[row][column] = "<td>" + (row - 1) * (column-1) + "</td>";
document.getElementById("output").innerHTML = result[row][column];
}
}
result += "</tr>";
}
document.getElementById("output").innerHTML = result[row];
}
}
*{
box-sizing: border-box;
}
.fcontainer{
display: flex;
}
div.fcontainer{
justify-content: space-between;
flex-basis: 50%;
margin: 15px;
}
body {
margin: 40px;
background-color: rgb(230, 255, 247);
font-family: 'Roboto', sans-serif;
font-size: calc(10px + (24 - 10) * (100vw - 300px) / (1600 - 300));
}
h1, h2 {
text-align: center;
}
img {
display: block;
width: 300px;
margin: 0 auto;
}
a {
text-decoration: none;
}
p {
margin: 10px 0px;
}
button {
margin: 10px 0px;
}
div.calc {
margin: 0 auto;
display: block;
width: 600px;
background-color: rgb(33, 209, 150);
padding: 20px;
border-radius: 5px;
text-align: center;
}
div.calc p {
text-align: left;
margin-left: 55px;
}
.calc input {
width: 80%;
text-align: right;
border-radius: 3px;
border: none;
}
div.cal h2,
h3 {
text-align: center;
}
#assignment6 div{
margin-top: 10px;
}
div.calc div input,
div.calc div label{
width: 45%;
display: inline-block;
text-align: right;
}
.calc button {
margin-left: 355px;
border-radius: 5px;
border:2px solid #008CBA;
color: black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.calc button:hover {
background-color: #008CBA;
color: white;
}
.calc button:active {
transform: scale(0.98);
/* Scaling button to 0.98 to its original size */
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
/* Lowering the shadow */
}
/* Assignment Listings Page start */
#mainPage{
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 350px;
}
#header{
flex-direction: column;
background-color: #9b9ea1;
color: #fff;
max-width: 50%;
margin: 0 auto;
align-self: center;
}
#header h1{
margin: 1em;
}
#main div{
padding: 10px;
background-color: #9b9ea1;
margin: 15px;
width: fit-content;
}
#main a{
padding: 5px;
margin: 5px;
color: #fff;
}
/* Assignment Listings Page end */
/* assignment 3 */
section.fcontainer{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
align-items: stretch;
margin: 0 auto;
max-width: 2600px;
padding: 10px;
border: 1 solid black;
}
section.fcontainer div{
background-color: blanchedalmond;
flex-basis: 45%;
padding: 15px;
margin: 0 15px;
}
/* Assignment Events. Activity 4. Shape area calculator Start*/
body>div{
background-color: gray;
padding: 10px;
color: #fff;
}
div.formulaImage {
flex-basis: 33%;
padding-right: 10px;
}
div.inputForm{
flex-basis: 33%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10px;
margin-right: -10px;
}
.inputForm div{
padding-bottom: 5px;
text-align:left;
}
.formulaImage img{
object-fit: cover;
width: 100%;
}
.fcontainer label{
display: inline-block;
width: 50%;
vertical-align: top;
}
.fcontainer input{
display: inline-block;
width: 33%;
text-align: right;
height: 1.2em;
}
.fcontainer output{
display: inline-block;
width: 33%;
text-align: center;
}
#buttonRight{
text-align: end;
margin-right: 80px;
}
#weeklyWageCalculatorButton{
margin-left: 19.5em;
}
/* assignment 5 */
div.formulaImage{
flex-basis: 50%;
}
#assignment5_4{
justify-content: space-evenly;
}
#inputFields div{
padding-top: 5px;
}
#media (max-width: 800px) {
.fcontainer {
flex-direction: column;
}
section.fcontainer div {
flex-basis: 100%;
margin:15px 15px;
width: 100%;
}
div.inputForm{
margin-top: 20px;
}
div.calc {
width: 250px;
}
#weeklyWageCalculatorButton{
margin-left: 0em;
}
#mainPage{
justify-content: center;
}
#header{
max-width: 65%;
}
#btn{
margin: 0;
}
}
#yards{
margin-right: 0;
}
#error{
font-size: smaller;
color: red;
}
/* activity 2, lesson 7 table styles */
table{
border: 1px solid white;
border-collapse: collapse;
}
td{
padding: 10px;
text-align: center;
border: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Multiplication Table.</title>
<link rel="stylesheet" href="../css/styles.css">
<script defer src="./activity2.js"></script>
<style>
table{
border: 1px solid black;
margin: 0 auto;
}
td, th{
width: 50px;
height: 50px;
border: 1px solid black;
}
th{
border: 2px solid black;
}
</style>
</head>
<body>
<div class="calc" id="assignment6">
<h2>Multiplication Table</h2>
<div>
<label for="number1">Start</label>
<input type="number" name="number1" id="number1" min="0" placeholder="0" onchange="">
</div>
<div>
<label for="number2">End</label>
<input type="number" name="number2" id="number2" min="0" placeholder="0" onchange="">
</div>
<p id="error"></p>
<table id="output"></table>
<p><button id="btn">Calculate</button></p>
</div>
</body>
</html>
The result table with number1 = 2 and nuber2 = 4 must look like this:
x 2 3 4
2 4 6 8
3 6 9 12
4 8 12 16
The task was to use an array to hold the information generated during processing (values only) and display the results from the array (add HTML formatting) after processing is complete. I modified the code from the previous assignment which was working fine.
The code is not working, shooting some errors.
I appreciate any help and suggestions on how to fix my code to make it work.
I finally solved this problem. The task was:
Blockquote
Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.
Extend any of the
'use strict';
window.addEventListener('load', function () {
document.getElementById('number1').addEventListener('focus', inputFocus);
document.getElementById('number2').addEventListener('focus', inputFocus);
document.getElementById('btn').addEventListener('click', buildTable);
// document.getElementById('number1').focus();
// document.getElementById('number2').focus();
});
function inputFocus() {
document.activeElement.select();
document.getElementById('error').innerText =
'Enter ' + document.activeElement.id + ' value.';
}
function getMinNumber() {
let multiplier = document.getElementById('number1').value;
multiplier = Number(multiplier);
return multiplier;
}
function getMaxNumber() {
let expressionsNumber = document.getElementById('number2').value;
expressionsNumber = Number(expressionsNumber);
return expressionsNumber;
}
function buildArray() {
document.getElementById("output").innerHTML = '';
let number1 = getMinNumber();
// console.log(number1)
let number2 = getMaxNumber();
// console.log(number2)
if (number1 <= 0 || number2 <= 0) {
document.getElementById("error").innerText = "Enter a natural number!";
} else if (number1 >= number2) {
document.getElementById("error").innerText = "End value must be grater than Start value!";
// document.getElementById("output").style.display = 'none';
// return false
}
else {
let table = [];
let elements = (number2 - number1) + 1;
let a = number1;
let b = number1;
for (let row = 0; row <= elements; row++) {
table[row] = [];
for (let column = 0; column <= elements; column++) {
if (row == 0 && column == 0) {
table[row][column] = "X"; //Top left cell
} else if (row == 0 && column > 0) {
table[row][column] = a; //Horisontal multipliers
a++;
} else if (row > 0 && column == 0) {
table[row][column] = b; //Vertical multipliers
b++;
} else {
table[row][column] = table[row][0] * table[0][column]; // Product of multipliers
}
}
}
return table;
}
}
function buildTable(array) {
array = buildArray();
console.log(array)
let result = "<table border='1' style='border-collapse:collapse'><tr>";
let header = array[0];
for (let i = 0; i < header.length; i++) {
result += "<th>" + header[i] + "</th>";
}
result += "</tr>";
let val;
for (let i = 1; i < array.length; i++) {
result += "<tr>";
for (let j = 0; j < array[i].length; j++) {
val = array[i][j];
if (j == 0){
result += "<th>" + header[i] + "</th>";
} else {
result += "<td>" + val + "</td>";
}
}
result += "</tr>";
}
result += "</table>";
console.log(result);
document.getElementById("output").innerHTML = result;
}
*{
box-sizing: border-box;
}
.fcontainer{
display: flex;
}
div.fcontainer{
justify-content: space-between;
flex-basis: 50%;
margin: 15px;
}
body {
margin: 40px;
background-color: rgb(230, 255, 247);
font-family: 'Roboto', sans-serif;
font-size: calc(10px + (24 - 10) * (100vw - 300px) / (1600 - 300));
}
h1, h2 {
text-align: center;
}
img {
display: block;
width: 300px;
margin: 0 auto;
}
a {
text-decoration: none;
}
p {
margin: 10px 0px;
}
button {
margin: 10px 0px;
}
div.calc {
margin: 0 auto;
display: block;
width: 600px;
background-color: rgb(33, 209, 150);
padding: 20px;
border-radius: 5px;
text-align: center;
}
div.calc p {
text-align: left;
margin-left: 55px;
}
.calc input {
width: 80%;
text-align: right;
border-radius: 3px;
border: none;
}
div.cal h2,
h3 {
text-align: center;
}
#assignment6 div{
margin-top: 10px;
}
div.calc div input,
div.calc div label{
width: 45%;
display: inline-block;
text-align: right;
}
.calc button {
margin-left: 355px;
border-radius: 5px;
border:2px solid #008CBA;
color: black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.calc button:hover {
background-color: #008CBA;
color: white;
}
.calc button:active {
transform: scale(0.98);
/* Scaling button to 0.98 to its original size */
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
/* Lowering the shadow */
}
/* Assignment Listings Page start */
#mainPage{
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 350px;
}
#header{
flex-direction: column;
background-color: #9b9ea1;
color: #fff;
max-width: 50%;
margin: 0 auto;
align-self: center;
}
#header h1{
margin: 1em;
}
#main div{
padding: 10px;
background-color: #9b9ea1;
margin: 15px;
width: fit-content;
}
#main a{
padding: 5px;
margin: 5px;
color: #fff;
}
/* Assignment Listings Page end */
/* assignment 3 */
section.fcontainer{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
align-items: stretch;
margin: 0 auto;
max-width: 2600px;
padding: 10px;
border: 1 solid black;
}
section.fcontainer div{
background-color: blanchedalmond;
flex-basis: 45%;
padding: 15px;
margin: 0 15px;
}
/* Assignment Events. Activity 4. Shape area calculator Start*/
body>div{
background-color: gray;
padding: 10px;
color: #fff;
}
div.formulaImage {
flex-basis: 33%;
padding-right: 10px;
}
div.inputForm{
flex-basis: 33%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10px;
margin-right: -10px;
}
.inputForm div{
padding-bottom: 5px;
text-align:left;
}
.formulaImage img{
object-fit: cover;
width: 100%;
}
.fcontainer label{
display: inline-block;
width: 50%;
vertical-align: top;
}
.fcontainer input{
display: inline-block;
width: 33%;
text-align: right;
height: 1.2em;
}
.fcontainer output{
display: inline-block;
width: 33%;
text-align: center;
}
#buttonRight{
text-align: end;
margin-right: 80px;
}
#weeklyWageCalculatorButton{
margin-left: 19.5em;
}
/* assignment 5 */
div.formulaImage{
flex-basis: 50%;
}
#assignment5_4{
justify-content: space-evenly;
}
#inputFields div{
padding-top: 5px;
}
#media (max-width: 800px) {
.fcontainer {
flex-direction: column;
}
section.fcontainer div {
flex-basis: 100%;
margin:15px 15px;
width: 100%;
}
div.inputForm{
margin-top: 20px;
}
div.calc {
width: 250px;
}
#weeklyWageCalculatorButton{
margin-left: 0em;
}
#mainPage{
justify-content: center;
}
#header{
max-width: 65%;
}
#btn{
margin: 0;
}
}
#yards{
margin-right: 0;
}
#error{
font-size: smaller;
color: red;
}
/* activity 2, lesson 7 table styles */
table{
border: 1px solid white;
border-collapse: collapse;
}
td{
padding: 10px;
text-align: center;
border: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - Assignment 8, Activity 1. Multiplication Table.</title>
<link rel="stylesheet" href="../css/styles.css">
<script defer src="./activity2.js"></script>
<style>
table{
border: 1px solid black;
margin: 0 auto;
}
td, th{
width: 50px;
height: 50px;
border: 1px solid black;
}
th{
background-color: azure;
border: 2px solid black;
color: black;
}
</style>
</head>
<body>
<h1> - Assignment 8. Activity 1. </h1>
<div class="calc" id="assignment6">
<h2>Multiplication Table</h2>
<div>
<label for="number1">Start</label>
<input type="number" name="number1" id="number1" min="0" placeholder="0" onchange="">
</div>
<div>
<label for="number2">End</label>
<input type="number" name="number2" id="number2" min="0" placeholder="0" onchange="">
</div>
<p id="error"></p>
<table id="output"></table>
<p><button id="btn" onclick="">Calculate</button></p>
</div>
</body>
</html>
activities from JavaScript Programming/Loops to use an array to hold the information generated during processing (values only) and display the results from the array (add HTML formatting) after processing is complete.
Colleagues, there is such an example for clarity.
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
s.addEventListener('click', function() {
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
arr[i].classList.remove('li-example-active');
})
arr[i].classList.add('li-example-active');
})
})
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 20px;
letter-spacing: 3px;
}
li.li-example-active{
background-color: #00c;
}
<menu class="example">
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
</menu>
I do not think that it is necessary to explain what is happening in the example above.
And an example on AngularJS
const app = angular.module('app', []);
app.directive('example', function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
}
}
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="active = !active"
ng-class="active ? '' : 'li-example-active'">
<span>{{example}}</span>
</li>
</menu>
<html>
And how in this variant to implement this example as in the first classical variant JS ???? So that the element that was clicked was assigned the class li-example-active, and the rest was removed the classli-example-active ???
Create an array and a function to manipulate that array.
Use them in the HTML
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="makeActive($index)"
ng-class="{'li-example-active': activeArr[$index]}">
<span>{{example}}</span>
</li>
</menu>
Implement them in a controller:
app.controller('example', function($scope) {
$scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
$scope.activeArr = $scope.myExample.map(_ => false);
$scope.makeActive=function(index) {
Object.keys($scope.activeArr).forEach( _ => {
$scope.activeArr[_] = (_ == index);
});
};
});
The DEMO
const app = angular.module('app', []);
app.controller('example', function($scope) {
$scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
$scope.activeArr = $scope.myExample.map(_ => false);
$scope.makeActive=function(index) {
Object.keys($scope.activeArr).forEach( _ => {
$scope.activeArr[_] = (_ == index);
});
};
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app" ng-controller="example">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="makeActive($index)"
ng-class="{'li-example-active': activeArr[$index]}">
<span>{{example}}</span>
</li>
</menu>
<html>
I'm using ng-table v0.8.3 for the ng-table.min.js file. While i'm using ng-table v4.0.0 for the ng-table.min.css file. But still the pagination design is not working see this picture. The pagenumbers have no design and are close to each other. I got the .scss file in this link: https://github.com/jrbotros/ng-table/blob/master/src/styles/ng-table.scss, and i just converted it to a css file to include in my index.html using this online converter : http://www.cssportal.com/scss-to-css/. And it generates this code below:
.ng-table th {
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ng-table th.sortable {
cursor: pointer;
}
.ng-table th.sortable .sort-indicator {
padding-right: 18px;
position: relative;
}
.ng-table th.sortable .sort-indicator:after, .ng-table th.sortable .sort-indicator:before {
content: "";
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
right: 5px;
top: 50%;
position: absolute;
opacity: 0.3;
margin-top: -4px;
}
.ng-table th.sortable .sort-indicator:before {
margin-top: 2px;
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
}
.ng-table th.sortable .sort-indicator:hover:after, .ng-table th.sortable .sort-indicator:hover:before {
opacity: 1;
visibility: visible;
}
.ng-table th.sortable.sort-desc, .ng-table th.sortable.sort-asc {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.ng-table th.sortable.sort-desc .sort-indicator:after, .ng-table th.sortable.sort-asc .sort-indicator:after {
margin-top: -2px;
}
.ng-table th.sortable.sort-desc .sort-indicator:before, .ng-table th.sortable.sort-asc .sort-indicator:before {
visibility: hidden;
}
.ng-table th.sortable.sort-asc .sort-indicator:after, .ng-table th.sortable.sort-asc .sort-indicator:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.ng-table th.sortable.sort-desc .sort-indicator:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.ng-table th.filter .input-filter {
margin: 0;
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ng-table .ng-table-group-header th {
text-align: left;
}
.ng-table .ng-table-group-selector {
display: block;
}
.ng-table .ng-table-group-close, .ng-table .ng-table-group-toggle {
float: right;
}
.ng-table .ng-table-group-toggle {
margin-right: 5px;
}
#media only screen and (max-width: 800px) {
.ng-table-responsive {
border-bottom: 1px solid #999;
}
.ng-table-responsive tr {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.ng-table-responsive td:before {
position: absolute;
padding: 8px;
left: 0;
top: 0;
width: 50%;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
.ng-table-responsive thead tr th {
text-align: left;
}
.ng-table-responsive thead tr.ng-table-filters th {
padding: 0;
}
.ng-table-responsive thead tr.ng-table-filters th form > div {
padding: 8px;
}
.ng-table-responsive td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
.ng-table-responsive td:before {
content: attr(data-title-text);
}
.ng-table-responsive, .ng-table-responsive thead, .ng-table-responsive tbody, .ng-table-responsive th, .ng-table-responsive td, .ng-table-responsive tr {
display: block;
}
}
.ng-table-pagination {
margin-top: 0;
}
.ng-table-group-selector:before, .ng-table-group-selector:after, .filter:before, .filter:after {
display: table;
content: " ";
}
.ng-table-group-selector:after, .filter:after {
clear: both;
}
.filter > .filter-cell {
float: left;
box-sizing: border-box;
}
.filter-horizontal > .filter-cell {
padding: 0 2px;
}
.filter-horizontal > .filter-cell:first-child {
padding-left: 0;
}
.filter-horizontal > .filter-cell:last-child, .filter-horizontal > .filter-cell.last {
padding-right: 0;
}
.s12 {
width: 100%;
}
.s11 {
width: 91.66667%;
}
.s10 {
width: 83.33333%;
}
.s9 {
width: 75%;
}
.s8 {
width: 66.66667%;
}
.s7 {
width: 58.33333%;
}
.s6 {
width: 50%;
}
.s5 {
width: 41.66667%;
}
.s4 {
width: 33.33333%;
}
.s3 {
width: 25%;
}
.s2 {
width: 16.66667%;
}
.s1 {
width: 8.33333%;
}
#media all and (max-width: 468px) {
.s12, .s11, .s10, .s9, .s8, .s7, .s6, .s5, .s4, .s3, .s2, .s1 {
width: 100%;
}
.filter > .filter-cell {
padding: 0px;
}
}
However if i use bootstrap v.3.3.7 i got the pagination design, but i want to use bootstrap4 because my UI got destroyed if i use the older version of bootstrap.
You need update css classes to pagination in the ngTable.js
the line 2218 $templateCache.put('ng-table/pager.html', '<div class="ng-cloak ng-table-pager" ng-if="params.data.length"> <div ng-if="params.settings().counts.length" class="ng-table-counts btn-group pull-right"> <button ng-repeat="count in params.settings().counts" type="button" ng-class="{\'active\':params.count()==count}" ng-click="params.count(count)" class="btn btn-default"> <span ng-bind="count"></span> </button> </div> <ul ng-if="pages.length" class="pagination ng-table-pagination"> <li ng-class="{\'disabled\': !page.active && !page.current, \'active\': page.current}" ng-repeat="page in pages" ng-switch="page.type"> <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">«</a> <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a> <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="next" ng-click="params.page(page.number)" href="">»</a> </li> </ul> </div> ');
with this $templateCache.put('ng-table/pager.html', '<div class="ng-cloak ng-table-pager" ng-if="params.data.length"> <div ng-if="params.settings().counts.length" class="ng-table-counts btn-group pull-right"> <button ng-repeat="count in params.settings().counts" type="button" ng-class="{\'active\':params.count()==count}" ng-click="params.count(count)" class="btn btn-light"> <span ng-bind="count"></span> </button> </div> <ul ng-if="pages.length" class="pagination ng-table-pagination"> <li ng-class="{\'disabled\': !page.active && !page.current, \'active\': page.current, \'page-item\': !page.current || page.current || !page.active}" ng-repeat="page in pages" ng-switch="page.type"> <a class="page-link" ng-switch-when="prev" ng-click="params.page(page.number)" href="">«</a> <a class="page-link" ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a class="page-link" ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a class="page-link" ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a> <a class="page-link" ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a class="page-link" ng-switch-when="next" ng-click="params.page(page.number)" href="">»</a> </li> </ul> </div> ');
and the line
the javascript file take as reference is https://github.com/jrbotros/ng-table/blob/master/dist/ng-table.js
I use this directiv : http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
I have problem to with moving cards, when i move cards higher is ok, if the cards give less the problem starts.
i did this feature :
if ($scope.movingItem.indeksList == index) {
console.log('qrwa')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
$scope.lists[index].cards = external[index].cards;
} else {
console.log('qrwa2')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
$scope.lists[index].cards = external[index].cards;
}
If I do the movement in the same list and i move card higher is ok then must be perform:
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
When from up to down must be perform :
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
And here is problem I cant get $index on which place I drop card to make If that I move card lower make this perform, If higer make this perform...
Here is whole project:
https://plnkr.co/edit/BVF0KxPrWiCeGDXVpQDV?p=preview
This code works:
$scope.dropCallback = function (index, item, external) {
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
$scope.lists[index].cards = external[index].cards;
console.log($scope.lists[index].cards)
return item;
};
The watcher is not neccesary in this case, because you are getting informed of changes by the dropCallback function itself.
Your job is simply to remove the item at the index, like you did. Regardless of the moving direction.
EDIT
Here is the working plunker
Not sure why you need to use dropCallback just to move items around in the list. You can use dnd-moved="item.cards.splice($index, 1)" as shown in the demo.
Check out update version of your code:
angular.module("app", ["dndLists"]).controller("c1", function($scope){
$scope.title ="drag and drop";
$scope.lists = [
{
id: 2,
name: "list2",
cards: [
{ name: "card1"},
{ name: "card2"},
{ name: "card3"},
{ name: "card4"},
{ name: "card5"}
]
},
{
id: 3,
name: "list3",
cards: [
{ name: "card1"},
{ name: "card2"},
{ name: "card3"},
{ name: "card4"},
{ name: "card5"}
]
}
];
$scope.logEvent = function (indeksList, IndexCard) {
$scope.movingItem = {
indeksList: indeksList,
IndexCard: IndexCard
}
};
$scope.dropCallback = function (index, item, external) {
return item;
};
})
/* Styles go here */
.tilt {
transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
/* <BEGIN> For OS X */
*:focus {
outline: none;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* <END> For OS X */
body {
font-family: 'Open Sans', sans-serif;
background-color: #0375AB;
}
#wrapper, #topbar-inner {
width: 95%;
margin: 0 auto;
}
#topbar {
background-color: #036492;
}
#topbar-inner {
height: 42px;
position: relative;
}
#topbar #nav {
float: left;
width: 25%;
background: yellow;
}
#topbar #logo {
width: 100%;
padding-top: 8px;
text-align: center;
}
#topbar #login {
position: absolute;
right: 0px;
bottom: 10px;
}
#topbar #logo h1 {
margin: 0;
display: inline;
font-size: 24px;
font-family: "Ubuntu", sans-serif;
color: rgba(255, 255, 255, 0.3);
}
#topbar #logo h1:hover {
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
#wrapper {
margin-top: 30px;
}
#tasks {
width: 260px;
padding: 7px;
background-color: #E2E4E6;
border-radius: 3px;
}
#tasks h3 {
padding: 0;
margin: 0px 0px 5px 0px;
font-weight: 400;
font-size: 14px;
}
#tasks ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tasks li {
padding: 5px 8px;
margin-bottom: 4px;
background-color: #fff;
border-bottom: 1px #CCCCCC solid;
border-radius: 3px;
font-weight: 300;
}
#tasks li i {
float: right;
margin-top: 5px;
}
#tasks li i:hover {
cursor: pointer;
}
#tasks li i.fa-trash-o {
color: #888;
font-size: 14px;
}
#tasks input[type=text] {
margin: 0;
width: 244px;
padding: 5px 8px;
border-width: 0;
border-radius: 3px;
box-shadow: none;
}
.btn-login {
color: #fff;
background-color: #448DAF;
text-decoration: none;
border-radius: 3px;
padding: 5px 10px;
}
<script data-require="angular.js#1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-drag-and-drop-lists#1.2.0" data-semver="1.2.0" src="https://marceljuenemann.github.io/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<body ng-app="app">
<div ng-controller="c1">
<ul style="list-style-type: none;">
<li ng-repeat="item in lists">
<div style="float: left; margin-left: 5px;">
<div id="tasks">
{{item.name}}
<ul dnd-list="item.cards" dnd-drop="dropCallback($index, item, lists)">
<li ng-repeat="card in item.cards"
dnd-draggable="card"
dnd-dragstart="logEvent($parent.$index, $index)"
dnd-moved="item.cards.splice($index, 1)"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
dnd-effect-allowed="move">
{{card.name}}
</li>
</ul>
<form ng-submit="addTask(item._id, newTask, $index)">
<input type="text" ng-model="newTask" placeholder="add a new task" required />
</form>
</div>
</div>
</li>
</ul>
</div>
</body>
You can find Plunker project here.
I'm learning AngularJS by working through this on YouTube tutorial and I've hit a block on the 14th video with the ng-submit directive.
See code snipit below, when you fill in the form at the bottom and click submit it's supposed to add a new Ninja, but it's not working. There are no errors showing in the console. I placed a debugger breakpoint within the addNinja() function definition and it doesn't go into it when I click submit.
Any idea what I'm doing wrong?
var myNinjaApp = angular.module('myNinjaApp',[]);
myNinjaApp.controller('NinjaController', ['$scope',function($scope){
$scope.removeNinja = function(ninja){
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
};
$scope.addNinja = function(){
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
};
// $scope.addNinja = function() {
// $scope.ninjas.push(this.newninja);
// $scope.newninja = '';
// };
$scope.ninjas = [
{
name: "Yoshi",
belt: "green",
rate: 50,
available: true
},
{
name: "Crystal",
belt: "yellow",
rate: 30,
available: true
},
{
name: "Ryu",
belt: "orange",
rate: 10,
available: false
},
{
name: "Shaun",
belt: "black",
rate: 1000,
available: true
}
];
}]);
body{
font-family: Helvetica;
margin: 0;
}
h1,h2,h3{
margin: 0;
}
.belt{
padding: 5px 10px;
border-radius: 10px;
margin-left: 5px;
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
#menu-bar{
background: crimson;
color: #fff;
padding: 10px;
}
#menu-bar h1{
font-size: 24px;
font-weight: normal;
display: inline-block;
}
#menu-bar ul{
float: right;
list-style-type: none;
padding: 0;
margin: 6px 0;
}
#menu-bar li{
float: right;
margin-left: 20px;
}
#menu-bar a{
color: #fff
}
main{
background: #eee;
width: 80%;
margin: 30px auto;
border-radius: 10px;
}
.content{
padding: 20px;
}
.content button,
.content input[type="submit"]{
background: #fff;
padding: 10px;
border-radius: 10px;
cursor: pointer;
color: #777;
border: 0;
box-shadow: 2px 2px 2px rgba(20,20,20,0.1);
font-size: 16px;
}
.content button:nth-child(2){
float: right;
}
.content ul{
padding: 0;
list-style-type: none;
margin: 30px 0;
}
.content li{
padding: 15px 0;
border-top: 1px solid #e2e2e2;
color: #444;
}
.content li span{
float: right;
}
.content li h3{
display: inline-block;
font-weight: normal;
font-size: 22px;
}
.content input{
width: 90%;
padding: 10px 5%;
border-radius: 10px;
border: 2px solid #ddd;
margin: 10px 0;
}
.content input[type="submit"]:last-child{
width: 150px;
display: block;
margin: 15px auto;
}
.remove{
float: right;
padding: 5px;
background: #fff;
width: 18px;
text-align: center;
border-radius: 20px;
color: crimson;
cursor: pointer;
margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
<title>TheNetNinja Angular Playlist</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div class="content">
<div ng-controller="NinjaController">
<button ng-click="order = 'name'">Order by Name</button>
<button ng-click="order = 'belt'">Order by Belt</button>
<input type="text" ng-model="search" placeholder="Search for a ninja">
<ul>
<li ng-repeat="ninja in ninjas | orderBy: order | filter: search" ng-show="ninja.available">
<h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>
<div class="remove" ng-click="removeNinja(ninja)">x</div>
<span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
</li>
</ul>
</div>
<form ng-submit="addNinja()">
<input type="text" placeholder="name" ng-model="newninja.name" />
<input type="text" placeholder="belt" ng-model="newninja.belt" />
<input type="text" placeholder="rate" ng-model="newninja.rate" />
<input type="submit" value="Add new ninja">
</form>
<p>{{newninja}}</p>
</div>
</body>
</html>
You have a div in the wrong place - move </div> above <form ng-submit="addNinja()"> to after <p>{{newninja}}</p>
bascially the ng-submit is not within the ninjacontroller div
see - https://plnkr.co/edit/pPucxMw0Yjr9OZoxl0vy?p=preview for a working version
myNinjaApp.controller('NinjaController', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$http({
url: "data/ninjas.json",
method: "GET"
}).then(function (resp) {
//$log.log(resp.data);
$scope.ninjas = resp;
}, function (resp) {
$log.error("ERROR Occurred");
//debugger;
});
$scope.removeNinja = function (ninja) {
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
}
$scope.addNinja = function () {
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
$scope.newninja.name = "";
$scope.newninja.belt = "";
$scope.newninja.rate = "";
};
$scope.removeAll = function () {
$scope.ninjas = [];
};
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
}]);