this is my tree.jsp
<html>
<head>
<link rel="stylesheet" href="resources/css/style.css" />
<script src="resources/js/controller/AutoConfigController.js"></script>
<script src="demo/jquery.2.0.3.js"></script>
<script src="demo/angular.1.2.29.js"></script>
<script src="demo/bootstrap.3.1.1.js"></script>
<script src="demo/ui-bootstrap-tpls.0.11.2.js"></script>
<script src="demo/prettify.1.0.1.js"></script>
<link href="demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">
<link href="demo/prettify-style.css" rel="stylesheet" type="text/css">
<script src="angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
<style type="text/css">
.header {
padding-top: 50px;
padding-bottom: 50px;
background-color: #444980;
}
.head-container {
width: 1140px;
margin: auto;
}
.header h1 {
color: #fffffa;
font-size: 60px
}
.header h2 {
color: #fffffa;
font-size: 24px;
font-style: normal
}
.example-caption {
color: #bbb;
font-size: 12px
}
.docs-body {
width: 1140px;
margin: auto auto 50px;
}
.docs-footer {
background-color: #F5F5F5;
text-align: center;
padding: 30px 0;
border-top: #e5e5e5
}
.tab-pane {
background-color: #f8f8f8;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.nav li.active a {
background-color: #f8f8f8
}
pre.code {
border: none;
background-color: #f8f8f8;
padding: 10px;
margin: 0;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.docs-sidenav {
margin-top: 45px;
margin-bottom: 0;
}
.docs-sidenav>li>a {
display: block;
font-size: 13px;
font-weight: 500;
color: #999;
padding: 4px 20px;
}
.docs-sidenav>li.active>a {
font-weight: 700;
color: #563d7c;
border-left: 2px solid #563d7c;
padding-left: 18px;
}
.docs-sidenav>li>a:hover {
background-color: transparent;
color: #563d7c;
border-left: 1px solid #563d7c;
padding-left: 19px;
}
.type-hint-object {
background: #999;
}
.type-hint-boolean {
background: rgb(18, 131, 39);
}
.type-hint-number {
background: rgb(189, 63, 66);
}
body, html {
background: none !important;
background-image: none !important;
}
#mydiv {
position: fixed;
top: 30%;
left: 25%;
width: 30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
background-color: #f3f3f3;
}
</style>
<body ng-controller="AutoConfigController">
<div id="mydiv">
<form>
<div>
<input id="treeSearchText" type="text" />
<button id="searchTree" class="btn">Search</button>
</div>
</form>
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{techList}}
</treecontrol>
<script>
angular.module('SuperAdminReveal')
.directive('treeControl', function () {
return {
template: '<div class="treeControl" ng-transclude></div>',
restrict: 'E',
replace: true,
transclude: true,
link: function postLink(scope, element, attrs) {
element.bind('click', function (e) {
if (e.target.tagName === "LI" && e.target.childElementCount) {
$(e.target).toggleClass('collapsed');
}
})
}
};
});
</script>
</body>
</html>
and this is my treescontroller.java: from here i am returning json value to tree.jsp
package com.reveal.web.controller;
import java.util.List;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.reveal.web.controller.EnsureCapacity.Technology;
#Controller
public class TreesController {
#RequestMapping(value="/mytree",method = RequestMethod.GET)
public String printWelcome(ModelMap model) {
return "tree";
}
#RequestMapping(value = "/getTechList", method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
public #ResponseBody List<EnsureCapacity.Technology> getTechList(){
EnsureCapacity ensureCapacity = new EnsureCapacity();
List<EnsureCapacity.Technology> techList = ensureCapacity.getTechList();
return techList;
}
}
output:
Selected Node : [{"pId":0,"techName":"Node 1","id":1},{"pId":1,"techName":"Node 1.1","id":0},{"pId":1,"techName":"Node 1.2","id":0},{"pId":0,"techName":"Node 2","id":1},{"pId":1,"techName":"Node 2.1","id":0},{"pId":1,"techName":"Node 2.2","id":0},{"pId":1,"techName":"Node 2.3","id":0},{"pId":0,"techName":"Node 3","id":1},{"pId":1,"techName":"Node 3.1","id":0},{"pId":1,"techName":"Node 3.2","id":0},{"pId":0,"techName":"Node 4","id":1},{"pId":1,"techName":"Node 4.2","id":0},{"pId":1,"techName":"Node 4.3","id":0},{"pId":1,"techName":"Node 4.4","id":0},{"pId":0,"techName":"Node 5","id":1},{"pId":1,"techName":"Node 4.5","id":0},{"pId":1,"techName":"Node 4.6","id":0},{"pId":0,"techName":"Node 6","id":1},{"pId":1,"techName":"Node 6.1","id":0},{"pId":1,"techName":"Node 6.2","id":0},{"pId":1,"techName":"Node 6.3","id":0},{"pId":1,"techName":"Node 6.4","id":0},{"pId":1,"techName":"Node 6.5","id":0},{"pId":1,"techName":"Node 6.6","id":0},{"pId":1,"techName":"Node 6.7","id":0},{"pId":1,"techName":"Node 6.8","id":0},{"pId":0,"techName":"Node 7","id":1},{"pId":1,"techName":"Node 7.1","id":0},{"pId":0,"techName":"Node 8","id":1},{"pId":1,"techName":"Node 8.1","id":0},{"pId":1,"techName":"Node 8.2","id":0},{"pId":1,"techName":"Node 8.3","id":0},{"pId":1,"techName":"Node 8.4","id":0},{"pId":1,"techName":"Node 8.5","id":0},{"pId":1,"techName":"Node 8.6","id":0},{"pId":1,"techName":"Node 8.7","id":0},{"pId":1,"techName":"Node 8.8","id":0},{"pId":1,"techName":"Node 8.9","id":0},{"pId":1,"techName":"Node 8.10","id":0},{"pId":1,"techName":"Node 8.11","id":0},{"pId":1,"techName":"Node 8.12","id":0},{"pId":1,"techName":"Node 8.12","id":0}]
this is displaying on browser how to make it in treeview .
I am using angular-tree-control module
// Update tree control below
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{node.techName}} ({{node.id}} ) {{$index}}
</treecontrol>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am working on my Gatsby app where I've added my code for my navigation. Basically, I've added my external bootstrap 5 alpha code on my gatsby-ssr.js file:
import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous" />,
<script
src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"
crossOrigin="anonymous"
defer
/>
])
}
Then on my Layout component, I've included the CSS:
import React, { useEffect } from "react"
import "../assets/css/bootstrap.min.css"
import "../assets/css/style.css"
import "../assets/css/aos.css"
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
CSS works fine, however, the dropdown menu doesn't slide down or toggle when I click on it.
Not sure why, but does anyone knows what causing this?
Make sure the data-target and id are the same. Most of the problem are here.
Check your code.
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<icon>Hamburger</icon>
</button>
Why you don't use React Bootstrap? I think you are overkilling the whole process (using SSR, importing the modules, etc)
You just need to install it and import the desired components from React Bootstrap by:
npm install react-bootstrap bootstrap
After that, import your desired component. For example:
const { Dropdown } = ReactBootstrap
const App=()=>{
return <Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
}
ReactDOM.render(
<App/>,
document.body
);
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.dropdown-toggle {
white-space: nowrap;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
border-radius: 0;
}
.dropdown-toggle:after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
.dropdown-menu.show {
display: block;
}
.dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=top] {
right: auto;
bottom: auto;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
*, :after, :before {
box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.dropdown-toggle {
white-space: nowrap;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
border-radius: 0;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
button:focus:not(:focus-visible) {
outline: 0;
}
.btn-success.focus, .btn-success:focus {
box-shadow: 0 0 0 0.2rem rgba(72,180,97,.5);
}
.btn-success.focus, .btn-success:focus, .btn-success:hover {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.dropdown-toggle {
white-space: nowrap;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
*, :after, :before {
box-sizing: border-box;
}
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"
crossorigin></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
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 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;
}
}]);
I have to filter a gallery by clicking on icons, i.e. the male icon should filter only male images (as the dropdown above does) and the same for the females.
so the dropdown shows what i'm trying to do with the icons, but the icons themselves don't work... what am I missing? Thanks a lot for your help!!
var galleryApp = angular.module('galleryApp', []);
galleryApp.controller('galleryController', function galleryController($scope) {
$scope.images = [
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
"altText" : "Person 1",
"type" : "female, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
"altText" : "Person 2",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
"altText" : "Person 3",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
"altText" : "Person 4",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
"altText" : "Person 5",
"type" : "female, all"
}
];
});
body { margin: 0; background: #333; }
#mainGallery {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
#mainGallery .imgBlock {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
#mainGallery .imgBlock img {
width: 100%;
height: auto;
}
#seperator {
width: 100%;
height: 1px;
display: block;
}
.search {
background: #222;
border: 1px solid black;
width: 500px;
padding: 10px 0;
margin: .5vw auto .5vw auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dropdown {
margin-left: 15px;
}
.filterImageWrapper {
position: relative;
width: 470px;
overflow: hidden;
margin: 15px;
}
.filterImage {
width: 470px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transform: translateX(0);
transform:translateX(0);
-webkit-transition: all 1s;
transition: all 1s;
}
#overlayFilter {
opacity:0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 470px;
-webkit-transition:all 1s;
transition:all 1s;
}
#overlayFilter.overlayOpacity {
opacity: 1;
}
#filterBar {
width: 100%;
height: 60px;
background: #666;
margin: .5vw;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid black;
}
.selectedFarbig {
-webkit-transform: scale(4,4) translate(-40px, 50px);
transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
-webkit-filter: grayscale(.9) sepia(.3);
filter: grayscale(.9) sepia(.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
webkit-transition: all .4s;
transition: all .4s;
}
.galleryItems:hover {
-webkit-filter: grayscale(.1) sepia(.8);
}
#filterBar input:first-child {
height: 50px;
}
#filterBar input:nth-child(2) {
height: 50px;
}
#media screen and (max-width: 400px) {
#mainGallery .imgBlock { margin: 0; }
#mainGallery { padding: 0; }
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div ng-controller = "galleryController" id="mainGallery">
<div class="search">
<label class="dropdown">
<select id="selection" ng-model="query">
<option value="all">All</option>
<option value="malex">Male</option>
<option value="female">Female</option>
</select>
</label>
<div id="filterBar">
<input ng-model="query" type="image" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" value="malex">
<input ng-model="query" type="image" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" value="female">
</div>
<div id="seperator"></div>
<div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
<!-- images placed inside block elements to deal with a Firefox rendering bug affecting scaled flexbox images -->
<img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
The input with type="image" is a graphical submit button, it doesn't have a meaningful value attribute, so that's probably it doesn't really work. Try to simply replace your inputs with something like
<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />
See updated code:
var galleryApp = angular.module('galleryApp', []);
galleryApp.controller('galleryController', function galleryController($scope) {
$scope.images = [
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
"altText" : "Person 1",
"type" : "female, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
"altText" : "Person 2",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
"altText" : "Person 3",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
"altText" : "Person 4",
"type" : "malex, all"
},
{
"source" : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
"altText" : "Person 5",
"type" : "female, all"
}
];
});
body { margin: 0; background: #333; }
#mainGallery {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
#mainGallery .imgBlock {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
#mainGallery .imgBlock img {
width: 100%;
height: auto;
}
#seperator {
width: 100%;
height: 1px;
display: block;
}
.search {
background: #222;
border: 1px solid black;
width: 500px;
padding: 10px 0;
margin: .5vw auto .5vw auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dropdown {
margin-left: 15px;
}
.filterImageWrapper {
position: relative;
width: 470px;
overflow: hidden;
margin: 15px;
}
.filterImage {
width: 470px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transform: translateX(0);
transform:translateX(0);
-webkit-transition: all 1s;
transition: all 1s;
}
#overlayFilter {
opacity:0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 470px;
-webkit-transition:all 1s;
transition:all 1s;
}
#overlayFilter.overlayOpacity {
opacity: 1;
}
#filterBar {
width: 100%;
height: 60px;
background: #666;
margin: .5vw;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid black;
}
.selectedFarbig {
-webkit-transform: scale(4,4) translate(-40px, 50px);
transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
-webkit-filter: grayscale(.9) sepia(.3);
filter: grayscale(.9) sepia(.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
webkit-transition: all .4s;
transition: all .4s;
}
.galleryItems:hover {
-webkit-filter: grayscale(.1) sepia(.8);
}
#filterBar input:first-child {
height: 50px;
}
#filterBar input:nth-child(2) {
height: 50px;
}
.imgButton {
width: 40px;
height: 40px;
cursor: pointer;
}
#media screen and (max-width: 400px) {
#mainGallery .imgBlock { margin: 0; }
#mainGallery { padding: 0; }
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div ng-controller = "galleryController" id="mainGallery">
<div class="search">
<label class="dropdown">
<select id="selection" ng-model="query">
<option value="all">All</option>
<option value="malex">Male</option>
<option value="female">Female</option>
</select>
</label>
<div id="filterBar">
<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />
</div>
<div id="seperator"></div>
<div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
<!-- images placed inside block elements to deal with a Firefox rendering bug affecting scaled flexbox images -->
<img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>