I am using drag and drop library in Angular JS from the below link, its working perfectly because it doesn't have id in the div.
https://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
I am using HTML 5 drag and drop functionality but the problem I am facing to generate dynamic id of each via Angular J S. I have tried ng-attr-id and id both but I am not able to fetch the id of my element via angular.element(element l).a t tr("id").
Working Code
------------
HTML:
<div ng-controller="myCtl" style="margin-top :50 p x;">
<div class="row">
<div class="col-m d-1 col-m d-offset-1">
<p>Click and drag a color onto the grid to the right</p>
<div class="peg green" x-l v l-drag gable="true" data-color="green">Green</div>
<div class="peg red" x-l v l-drag gable="true" data-color="red">Red</div>
<div class="peg blue" x-l v l-drag gable="true" data-color="blue">Blue</div>
<div class="peg black" x-l v l-drag gable="true" data-color="black">Black</div>
<div class="peg grey" x-l v l-drag gable="true" data-color="grey">Grey</div>
</div>
<div class="col-m d-10">
<div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span>
</div>
</div>
</div>
</div>
Controller( between the modal and view for drag and drop):
angular.module('my App', ['l v l. directives .drag drop'])
.controller('myCtl', ['$scope', function($scope) {
$scope.dropped = function(dragEl, dropEl) {
// this is your application logic, do whatever makes sense
var drag = angular.element(dragEl);
var drop = angular.element(dropEl);
console.log("The element " + drag.attr('id') + " has been dropped on " + drop.attr("id") + "!");
};
}]);
Modal(fetch the id of the dragged object ):
angular.element(element).at tr("id");
Not Working Code
----------------
HTML:
<div ng-controller="dd Controller" style="margin-top :50 p x;">
<div class="row">
<div class="col-m d-1 col-m d-offset-1">
<p>Click and drag a color onto the grid to the right</p>
<div ng-repeat="list in List">
<div id={{list.Name}} class="item" x-lvl-drag gable="true">{{list.Name}}</div>
</div>
</div>
<div class="col-m d-10">
<div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span>
</div>
</div>
</div>
</div>
Controller( between the modal and view for drag and drop):
angular.module('my App', ['l v l. directives .drag drop'])
.controller('my C t l', ['$scope', function($scope) {
$scope.dropped = function(drag E l, drop E l) {
// this is your application logic, do whatever makes sense
var drag = angular.element(drag E l);
var drop = angular.element(drop E l);
console.log("The element " + drag. at tr('id') + " has been dropped on " + drop .at tr("id") + "!");
};
}]);
Modal(fetch the id of the dragged object ):
angular.element(element).at tr("id");
Access to the attributes in the "lvl-drag-drop.js" file is incorrect, if you are using a directive, you can access the attributes in the third argument.
link: function (scope, el, attrs, controller)
See the comments in this example:
module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) {
return {
restrict: 'A',
link: function(scope, el, attrs, controller) {
//angular.element is no longer necessary if it refers to the element.
el.attr("draggable", "true");
//Incorrect
var id = angular.element(el).attr("id");
//This is correct
var id = attrs.id;
if (!id) {
id = uuid.new();
el.attr("id", id); //Also here
}
//.. more ...
}
}
}]);
Related
I have the following code. How do I make the contents of the array appear on the button? The arrays have a content of 0,1,2,3,4,5. I want the the buttons which are aligned vertically to be as follows:
0
1
2
3
4
5
var family = [0, 1, 2, 3, 4, 5];
console.log(family);
for (var prop in family) {
document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item"' + prop + '</button></div>';
console.log(prop);
}
button {
width: 200px;
height: 200px;
}
<div class="container">
<div class="row">
<ul id="aaron-family">
<div class="list-group"></div>
</ul>
<div class="col">
1 of 3
</div>
<div class="col">
j 1 of 3
</div>
</div>
</div>
This is working fine now.
your code was working fine, you just forget to close the <button> tag on appending the HTML.
var family = [0, 1, 2, 3, 4, 5];
for (var prop in family) {
document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item">' + prop + '</button></div>';
}
button {
width: 200px;
height: 200px;
}
<html>
<body>
<div class="container">
<div class="row">
<ul id="aaron-family">
<div class="list-group">
</div>
</ul>
<div class="col">
1 of 3
</div>
<div class="col">j 1 of 3
</div>
</div>
</div>
</body>
</html>
I hope this was helpful to you. If there is anything else please feel free to ask.
Your loop is incorrect as well as the string html you are trying to append, you can change it to (I used string templates for better readability) :
family.forEach((value) => {
document.getElementById('aaron-family').innerHTML += `
<div class="col">
<button type="button" class="list-group-item">${value}</button>
</div>
`;
});
So I'm currently attempting to dynamically create accordions which expand to a ui-grid containing some data. The issue is that if I do not expand the accordions within a few seconds of the page loading the ui-grid is blank. The outline of where the table should be exists but there is no data being displayed. I say being displayed because the data itself is in the html. It seems like its hidden by the accordion? When I resize the browser window the data appears though. Sorry if this is not detailed enough or I missed obvious debugging steps, I'm new to js/angular and to html. Below is my HTML code
<div ng-controller="TestController as test">
<script type="text/ng-template" id="group-template.html">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
TEST
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div ng-repeat="model in myData" track by $index>
<div uib-accordion-group class="panel-default" is-open="isOpen">
<uib-accordion-heading>
Test Model {{$index}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</uib-accordion-heading>
<div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both"></div>
<br />
<strong>Last Cell Edited:</strong>{{msg[$index]}}<br />
<button>Commit Changes</button>
</div>
</div>
</uib-accordion>
and my angular
(function () {
var app = angular
.module('testApp', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate'])
.controller('TestController', TestController);
TestController.$inject = ['$scope', 'uiGridConstants'];
function TestController ($scope, uiGridConstants) {
$scope.oneAtATime = false;
$scope.myData = myData;
$scope.msg = [];
$scope.gridOptions = [];
$scope.getGridOptions = function (index) {
$scope.gridOptions[index] ={
showColumnFooter: true,
columnDefs: [
{ field: 'ticker', enableCellEdit: false, width: '33%' },
{ field: 'current_w', aggregationType: uiGridConstants.aggregationTypes.sum, enableCellEdit: false, width: '33%' },
{ field: 'new_w', aggregationType: uiGridConstants.aggregationTypes.sum, width: '33%' }
],
data: myData[index],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
$scope.msg[index] = 'Edited Ticker:' + rowEntity.ticker + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
$scope.$apply();
})
}
}
};
for (i = 0; i < Object.keys($scope.myData).length; i++) {
$scope.getGridOptions(i);
console.log($scope.gridOptions[i]);
};
console.log($scope.gridOptions[1]);
};
var myData = [
[{ ticker: 'TICKER', current_w: 5, new_w: 4, },
{ ticker: 'TICKER 2', current_w: 3, new_w: 2, },
{ ticker: 'TICKER 3', current_w: 7, new_w: 0, }],
[{ ticker: 'TICKER', current_w: 5, new_w: 4, },
{ ticker: 'TICKER 2', current_w: 3, new_w: 2, },
{ ticker: 'TICKER 3', current_w: 7, new_w: 5, }]
];
})();
I would take a stab at this and say that you may want to add a ng-if="isOpen" to the ui-grid. So something like below should fix your problem.
<div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both" ng-if="isOpen"></div>
I was having issues with my grid displaying as well, and ensuring that the grid only appears when it is absolutely ready fixed the problem. The ui-grid documentation goes over this concept of a hidden grid at http://ui-grid.info/docs/#/tutorial/108_hidden_grids. They also have a plnkr that you can follow at http://plnkr.co/edit/LtpFnDUTofuxitb4Vh9x?p=preview. I hope this helps!
I am using owl carousel,for which data is coming from a ajax call. after ajax ng-repeat with populated the html content.
So i want to fire the directive which makes the owl carousel, after this all is done. How to do that.
One way i can think of using onFinishedRender directive, but this is not working.
directive :
directives.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
if(!!attr.onFinishRender){
$parse(attr.onFinishRender);
}
});
}
}
}
}]);
controller:-
pastWorkService.getAllPastWork()
.success(function(data) {
var len = data.length;
$scope.pastWorkData1 = data.slice(0, len/2);
$scope.pastWorkData2 = data.slice(len/2, len - 1);
$scope.owlCarouselPastWork1 = function(){
$('.owl-carousel2').owlCarousel({
items: 4,
loop:true,
slideSpeed : 1000,
autoPlay: 3000,
itemsDesktop: [1199, 4],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 3],
itemsTabletSmall: false,
itemsMobile: [479, 1],
navigation: false
});
};
$scope.owlCarouselPastWork = function(){
$('.owl-carousel1').owlCarousel({
items: 4,
loop:true,
slideSpeed : 1000,
autoPlay: 3000,
itemsDesktop: [1199, 4],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 3],
itemsTabletSmall: false,
itemsMobile: [479, 1],
navigation: false
});
};
});
html:-
<div class="owl-carousel1" role="listbox" >
<div class="item" ng-repeat="p in pastWorkData1" on-finish-render="owlCarouselPastWork1()">
<img src="{{p.mainImage}}" alt="completed-projects" />
<div class="panel-footer">{{p.apartmentName}}</div>
</div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
<div class="item" ng-repeat="p in pastWorkData2" on-finish-render="owlCarouselPastWork1()">
<img src="{{p.mainImage}}" alt="completed-projects" />
<div class="panel-footer">{{p.apartmentName}}</div>
</div>
</div>
Since you simply want to call a function after the last repeated item is rendered, here is one approach you could use:
html
<div class="owl-carousel1" role="listbox" >
<div class="item" ng-repeat="p in pastWorkData1">
<img src="{{p.mainImage}}" alt="completed-projects" />
<div class="panel-footer">{{p.apartmentName}}</div>
<span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork()"></span>
</div>
</div>
<!-- second row goes here as owl carousel can contain 1 row -->
<div class="owl-carousel2" role="listbox" >
<div class="item" ng-repeat="p in pastWorkData2">
<img src="{{p.mainImage}}" alt="completed-projects" />
<div class="panel-footer">{{p.apartmentName}}</div>
<span ng-if="$last" on-finish-render function-to-call="owlCarouselPastWork1()"></span>
</div>
</div>
directive
.directive('onFinishRender', function($timeout) {
return {
restrict: 'A',
scope: {
functionToCall: '&'
},
link: function(scope, elem, attrs) {
$timeout(function() {
scope.functionToCall();
});
}
}
})
Here is an extremely simple and contrived example to illustrate this idea. You could probably even rework this to have the function in the directive and you would simply pass the class identifier you want to call it on.
Still learning angular, but having issues rotating styles. Ultimately, I want the first record to be blue, the second to be white, the third blue, the fourth white, etc...
Right now my order is (incorrect):
Record 1 Blue
Record 3 blue
Record 2 white
Record 4 white
Any ideas what could be the issues?
HTML
<div id="dashboard" style="width: 1100px;" ng-controller="controller4">
<div class="blue" ng-repeat="metrics in dashboard" ng-if="($index % 2 == 0)">
<div align="center">
<h3>{[{metrics.value}]}</h3>
<span class=dashboardtext>{[{metrics.name}]}</span>
</div>
</div>
<div class="white" ng-repeat="metrics in dashboard" ng-if="($index % 2 != 0)">
<div align="center">
<h4>{[{metrics.value}]}</h4>
<span class=dashboardtext>{[{metrics.name}]}</span>
</div>
</div>
</div>
JS
var dashboard = [
{
value: 15,
name: "Total Completed"
},
{
value: 1200,
name: "Additional Widgets Sold"
},
{
value: 16,
name: "Projects"
},
{
value: 5,
name: "Average Days"
}
];
myApp.controller('controller4', function($scope) {
$scope.dashboard = dashboard;
});
ng-class-even & ng-class-odd directive perfectly suits your need.
ng-class-even -> Add a class value to DOM classList object when $index
is even
ng-class-odd -> Add a class value to DOM classList object when
$index is odd
Markup
<div ng-class="'blue'" ng-class-odd="'white'" ng-repeat="metrics in dashboard">
<div align="center">
<h3>{[{metrics.value}]}</h3>
<span class=dashboardtext>{[{metrics.name}]}</span>
</div>
</div>
For simple even/odd, you can use the ng-class-even and ng-class-odd attributes. If you have a more complex situation with more values, use the below solution.
Create a filter and use it in the class attribute.
app.filter("classFilter", function () {
return function (input) {
var $class = "";
switch(input % 2){
case 0:
$class = "blue";
break;
case 1:
$class = "white";
break;
}
return $class;
}
});
Then in your HTML, you would have
<div class="$index | classFilter" ng-repeat="metrics in dashboard">
<div align="center">
<h3>{[{metrics.value}]}</h3>
<span class=dashboardtext>{[{metrics.name}]}</span>
</div>
</div>
I want to use angular-drag-and-drop-lists with my own grid template to WYSIWYG editor. How to build my own HTML template without ng-repeat so it will be able to drop items in any predefined column and store information in $scope in which column item has been dropped?
I want to store dropped items in columns array:
.controller('DragDropGrid', ['$scope',
function($scope) {
$scope.layouts = {
selected: null,
templates: [
{name: "Plugin", type: "item", id: 2},
],
columns: [],
oldaproachcolumns: [
"A": [
],
"B": [
]
}
]
};
}
]);
This is currently not a working template. On drop it throws the error "undefined is not an object (evaluating 'targetArray.splice')":
<div ng-include="'grid.html'"></div>
<script type="text/ng-template" id="grid.html">
<div class="col-md-12 dropzone box box-yellow">
<div class="row template-grid" dnd-list="list">
<div class="col-xs-12 col-md-8" ng-repeat="item in list" dnd-draggable="item" ng-include="item.type + '.html'">Header</div>
<div class="col-xs-6 col-md-4">News</div>
</div>
</div>
</script>
<script type="text/ng-template" id="item.html">
<div class="item">Plugin {{item.id}}</div>
</script>
This is the standard working aproach:
<div class="row">
<div ng-repeat="(zone, list) in layouts.oldaproachcolumns" class="col-md-3">
<div class="dropzone box box-yellow">
<h3>{{zone}}</h3>
<div ng-include="'list.html'"></div>
</div>
</div>
</div>
<script type="text/ng-template" id="list.html">
<ul dnd-list="list">
<li ng-repeat="item in list" dnd-draggable="item" dnd-effect-allowed="move" dnd-moved="list.splice($index, 1)" dnd-selected="layouts.selected = item" ng-class="{selected: layouts.selected === item}" ng-include="item.type + '.html'">
</li>
</ul>
</script>
Based on this example: demo
How to build my own HTML template without ng-repeat
Use $templateCache and a for loop as an alternative:
var app = angular.module('foo', []);
function bop(model, data)
{
return data ? model : 'foo';
}
function baz()
{
return bop;
}
function foo($templateCache)
{
var i = 0, len = 5, bar = "";
for (i; i < len; i++)
{
bar = bar.concat("<li>",i,"<p ng-include=\u0022'foo'\u0022></p></li>");
}
$templateCache.put('listContent', bar);
}
angular.module('foo').filter('baz', baz);
app.run(foo);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo">
<script type="text/ng-template" id="foo">
<span>hi</span>
</script>
<input ng-model="dude">
<ul ng-include="'listContent' | baz:dude"></ul>
</div>
References
AngularJS: API: $templateCache
AngularJS: Is there a better way to achieve this than the one specified?