append html to the div with AngularJS - javascript

How can i pass html through in AngularJS controller ?
Here is my list.html:
<div class="col-xs-3" ng-repeat="item in companyData">
<a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item">
<span class="text-white block">{{item.vCompanyName}}</span>
</a>
<div id="packagehtml"></div>
</div>
<div id="lp" class="col-md-12 listing-div hidden"></div>
in controller.js:
$scope.pData = [];
$scope.getPackageInfo = function(id,name) {
$scope.name = name;
var summery = SubscriptionoptioncompanylistFactory.getSummary(id);
document.getElementById("lp").classList.remove("hidden");
$('.packages-data').html('');
$('#loading').show();
SubscriptionoptioncompanylistFactory.getPackageInDetail(id).
success(function(data) {
if(data != 0) {
$("#lp").html(summery); // this is used to append the data
document.getElementById("np").classList.add("hidden");
Array.prototype.push.apply($scope.pData, data);
$('#loading').hide();
} else {
document.getElementById("lp").classList.add("hidden");
document.getElementById("np").classList.remove("hidden");
$('#loading').hide();
}
});
};
Here, I have wrote $("#lp").html(summery);, in that div I have to append html which comes from var summery = SubscriptionoptioncompanylistFactory.getSummary(id);. But this is not going to append the data. In console I can see that data comes in summary variable. How can I do?

have a look at below modifications
Use angular ng-show for showing/hiding elements
Use data binding and avoid Jquery like Dom manipulation
<div class="col-xs-3" ng-repeat="item in companyData">
<a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item">
<span class="text-white block">{{item.vCompanyName}}</span>
</a>
<div id="packagehtml"></div>
</div>
<div id="lp" ng-show="lbVisible" class="col-md-12 listing-div hidden">{{summaryBinding}}</div>
and the controller would look like :
$scope.pData = [];
$scope.getPackageInfo = function (id, name) {
$scope.name = name;
var summery = SubscriptionoptioncompanylistFactory.getSummary(id);
$scope.lbVisible = true; //document.getElementById("lp").classList.remove("hidden");
$('.packages-data').html('');
$scope.loadingVisible = true; //$('#loading').show();
SubscriptionoptioncompanylistFactory.getPackageInDetail(id).
success(function (data) {
if (data != 0) {
$scope.summaryBinding = summery; // $("#lp").html(summery); // this is used to append the data
$scope.npVisible = false; // document.getElementById("np").classList.add("hidden");
Array.prototype.push.apply($scope.pData, data);
$scope.loadingVisible = false; // $('#loading').hide();
} else {
$scope.lbVisible = false; //document.getElementById("lp").classList.add("hidden");
$scope.npVisible = false; //document.getElementById("np").classList.remove("hidden");
$scope.loadingVisible = false; // $('#loading').hide();
}
});
};
your snippet is not showing elements that you use :
np, #loading so just find them and add the `ng-show` with the proper scope variable : `npVisible , lbVisible , loadingVisible`
and note that we add the data using summaryBinding
hope this helps :)

Related

jQuery drag-drop working for files, but not folders

I'm using the jquery and jquery UI plugin to drag and drop elements (folders and files) just like in a filebrowser.
I can manage to have the file go 'into' the folder, but not a folder to go into another.
Here is a demo :
There seems to be something conflicting, but I don't know where to look anymore.
The javascript is like this :
$(function () {
// fancytree is part of another script
$("#tree").fancytree({
expandLazy: true,
activate: function (event, data) {
var node = data.node;
if (node.data.href) {
window.open(node.data.href, node.data.target);
}
}
});
/* DRAG AND DROP STARTS HERE */
$(".listitems").draggable();
$(".droppable").droppable({
//preventCollision: true,
drop: function (event, ui) {
var draggableId = ui.draggable.attr("id");
var droppableId = $(this).attr("id");
//alert('FILE'+draggableId+' DROPED INTO '+droppableId);
$(this).append(ui.draggable);
var itemid = ui.draggable.attr('data-itemid');
var folderid = ui.draggable.attr('data-fldmid');
if (typeof folderid == 'undefined') {
folderid = 0;
}
if (typeof itemid == 'undefined') {
itemid = 0;
}
if (typeof droppableId == 'undefined') {
droppableId = 0;
}
$.ajax({
method: "POST",
url: "_ajax/filemanager/dragdrop.php",
//data : 'FileID='+ itemid +'&FolderID='+ droppableId,
data: 'FileID=' + itemid + '&FolderID=' + folderid + '&DropID=' + droppableId,
}).done(function (data) {
var result = $.parseJSON(data);
if (folderid == 0) {
//alert('FILE MOVED - FileID='+ itemid +'&FolderID='+ folderid+'&DropID='+ droppableId);
// Done moving file, hiding it
$("div#" + itemid).hide(500);
} else {
//alert('FOLDER MOVED - FileID='+ itemid +'&FolderID='+ folderid+'&DropID='+ droppableId);
// Done moving directory, hiding it
$("div#" + folderid).hide(500);
}
//$("div#"+folderid).hide(500);
//$("div#"+droppableId).hide(500);
});
}
});
$(".listitems").sortable();
$(".listitems").disableSelection();
var shouldCancel = false;
$('.dragMe').draggable({
containment: '.moveInHere',
revert: function () {
if (shouldCancel) {
shouldCancel = false;
return true;
} else {
return false;
}
}
});
$('.butNotHere').droppable({
over: function () {
shouldCancel = true;
},
out: function () {
shouldCancel = false;
}
});
});
And here is the html
<div class="box-body">
<div class="table-responsive mailbox-messages moveInHere" style="overflow: hidden; min-height:600px;">
<p>
<!--id, data-fldmid and data-itemid were added for testing purposes -->
<div class="boxFile small droppable listitems dragMe drag" id="D.4" data-fldmid='D.4' data-itemid='4'>
<a href="?n=9">
<div class="ffolder small yellow"></div>
</a>
<div class="boxFileTitle">Folder 1 (4)</div>
</div>
<div class="boxFile small droppable listitems dragMe drag" id="D.7" data-fldmid='D.7' data-itemid='7'>
<a href="?n=7">
<div class="ffolder small yellow"></div>
</a>
<div class="boxFileTitle">Folder A (7)</div>
</div>
<p>
<div style="" class="boxFile small listitems butNotHere dragMe drag" id="26" data-itemid='26'>
<img src='image.php?id=26' class='UploadedImageThumb'>
<div class="boxFileTitle">2016-12-12 14.50.14.jpg26</div>
<div class="boxFileOption">Preview | Edit | Trash</div>
</div>
</p>
<p>
<div style="" class="boxFile small listitems butNotHere dragMe drag" id="25" data-itemid='25'>
<img src='image.php?id=25' class='UploadedImageThumb'>
<div class="boxFileTitle">test.jpg25</div>
<div class="boxFileOption">Preview | Edit | Trash</div>
</div>
</p>
</p>
</div>
</div>
The 'butNotHere' class is to prevent files to be on top of each other. All this works fine, except the folder-into-folder dragging as described above.
I found the error, the variable in JS (folderid) had a letter 'D' in front of the real id. I did this during test to check if it was a file being moved or folder. So 'F' or 'D'.
So I changed this line
data-fldmid='D.7'
To this and it worked
data-fldmid='7'

bind ng-style from dynamic html

I have a problem with some dynamic data that it is stored in database.
I am storing in database div with ng-style, and then when response is back from server with this div , will like to apply a style to this div.
If it is not dynamic, I have no problems.
this is my code:
This my static html.
<div ng-controller="empty" >
<div>
<div ng-bind-html="validData | unsafe"/>
</div>
</div>
this is comming from database.
<div class="row">
<div ng-style="visualization" class="col-md-4">.col-md-2</div>
<div ng-style="visualization" class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div ng-style="visualization" class="col-md-4">.col-md-8</div>
</div>
and this should be my controller.
$http.get(globalVars + 'page/' + lastParam)
.success(function (data) {
$scope.empty = data;
$scope.validData = $scope.empty.layout.schema;
$compile($scope.validData);
if(typeof $rootScope.mode == 'undefined' || $rootScope.mode =='edit'){
$scope.visualization = {
"border-style": "dashed"
}
}
else{
$scope.visualization = {
"border-style": "none"
}
}
})
.error(function (data) {
});
in theory, in each div from data coming from database should be added "style=border-style:none/dashed",but this not happening, so ng-style it is not binded to angular.
some help should be appreciated.
thanks
The $compile(html) function returns another function to which you can pass the $scope variable. You could try doing:
$scope.validData = $compile($scope.validData)($scope);
This could make your controller code look like:
$http.get(globalVars + 'page/' + lastParam).success(function (data) {
$scope.empty = data;
$scope.validData = $scope.empty.layout.schema;
if(typeof $rootScope.mode == 'undefined' || $rootScope.mode =='edit'){
$scope.visualization = {
"border-style": "dashed"
}
}else{
$scope.visualization = {
"border-style": "none"
}
}
$scope.validData = $compile($scope.validData)($scope);
}).error(function (data) {
});
However there are other ways of doing what you're trying to achieve, possibly using CSS. For example, place a conditional class using ng-class, on the outer div:
<div ng-class="{'edit-mode': editModeEnabled }" ng-bind-html="validData | unsafe"/>
Then in CSS:
.edit-mode .row > div {
border-style: dashed;
}
And set editModeEnabled in your controller:
$scope.editModeEnabled = $rootScope.mode === 'edit';
Thanks, I used your suggestion.
div ng-class="{'edit-mode': editModeEnabled }" ng-bind- html="validData | unsafe"/>
Then in CSS:
.edit-mode .row > div {
border-style: dashed;
}
regards

AngularJS href is not getting dynamic value

javascript code:
cable.register.controller('VideoMonitorCtrl', ['$scope', '$sce','ENV', '$http', function ($scope, $sce, ENV, $http) {
console.log('Begin in video monitor controller');
var keepGoing =true;
var url = '/ps/features/';
var exists = false;
$scope.getVideoService = function () {
console.log("url"+$scope.hurl)
$http.get(url,{headers: {'contentType': 'application/json; charset=UTF-8'}}).success( function(response) {
if(response!='')
{
angular.forEach(response.features, function(feature){
console.log("in for each");
console.log(counter++)
if(keepGoing)
{
if(feature.name.trim() === "odl-video-monitor" && feature.installed.trim() ==='x')
{
console.log('in active again');
$scope.color='#FFFFFF';
$scope.msg='Quality Network';
$scope.hurl='index.html#/cable/videomonitor';
exists=true;
keepGoing = false;
}
}
});
if(!exists)
{
$scope.color='#BDBDBD';
$scope.msg='Video Quality Network is under maintenance';
}
}
else
{
$scope.color='#BDBDBD';
$scope.msg='Video Quality Network is under maintenance';
}
}).error(function (response) {
$scope.color='#BDBDBD';
$scope.msg='Video Quality Network is under maintenance';
});
};
}
]);
HTML code:
<a ng-href='{{hurl}}' ng-controller="VideoMonitorCtrl" ng-init="getVideoService()" id="hlink" style="text-decoration:none;">
<div class="box" style="background-color:{{color}};">
<div style="margin-top:15px;text-align:left;padding-left:23px;">
<span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}}
{{hurl}}
</span>
</div>
</div>
</a>
Output:
{{hurl}} => is printing the value in the div.
<a href={{hurl}} => there is not value in hurl here and link is not enabled.
Any reason? i am able to see the hurl content in the div but not in href?
If i write hardcoded value in href it is working but not dynamic?
Wrap the whole <a> element in another element and put the controller there, the scope of your VideoMonitorCtrl does not cover the <a> tag itself.
<div ng-controller="VideoMonitorCtrl" ng-init="getVideoService()">
<a ng-href='{{hurl}}' id="hlink" style="text-decoration:none;">
<div class="box" style="background-color:{{color}};">
<div style="margin-top:15px;text-align:left;padding-left:23px;">
<span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}}
{{hurl}}
</span>
</div>
</div>
</a>
</div>

Angular - Fill dropdown based on selection

HTML
<div class="col-xs-2 type-image" ng-repeat='group in groups'>
<a class="thumbnail" ng-click='selectItem(group)'>
<img src="<% group.image %>" class="img-responsive">
</a>
</div>
<div class="col-md-5 type-description" ng-bind-html="selectedItem.description | unsafe"></div>
<div class="col-md-6 no-gutter">
<select ng-options="gurte.id for gurte in group.gurte"></select>
</div>
app.js
app.controller('gurtController', function($scope, $http) {
$scope.groups = [];
$scope.loading = false;
$scope.init = function() {
$scope.loading = true;
$http.get('/api/groups').
success(function(data, status, headers, config) {
$scope.groups = data;
$scope.loading = false;
});
}
$scope.selectItem = function(item) {
$scope.selectedItem = item;
}
$scope.init();
});
How can I fill the select dropdown based on the selection in the upper block of the HTML? Am I right, that the scope is still on "group" when I have selected it in the top or do I have to pass "group" to the select field somehow?
If needed I can provide the output from the API too. basically its:
Group
-id
-name
-gurte (relationship) ->
- id
- spalten (many to many; ) ->
- id
- name (this needs to go to the dropdown)
-> pivot -> spalten_value

knockout if binding working in laptops, but not working in mobile and tablet

I am trying some thing with if binding from knockout. If value is true I want to show some text and if it is false, I want to show some different text, as given in the code.
When I am opening the page with this html, I am getting the expected results.
But when I am trying to get the result in phones and in kindle tab (working fine in wondows tab), it is not giving the results for the if binding I have used in html.
I tried removing '()' from failStatus and status in html, but it is not working. Is it any issue of binding or I am doing any thing wrong?
Thanks for any help.
function temp()
{
this.inviteeEmailList = ko.observableArray([]);
var emailList = {};
emailList['email'] = {'a#x.y , b#c.n'};
emailList['status'] = ko.observable();
emailList['failStatus'] = ko.observable();
this.showList = function()
{
for(var k in inviteeEmailList)
{
if(some_condition)
{
this.inviteeEmailList()[k]['status'](true);
this.inviteeEmailList()[k]['failStatus']("");
}
else
{
this.inviteeEmailList()[k]['status'](false);
this.inviteeEmailList()[k]['failStatus']("not exist");
}
}
}
}
<div id="foundEmail" data-bind="foreach : inviteeEmailList">
<span data-bind="if: $data.status()">
<span>Success</span>
</span>
<span data-bind="if:(!$data.status() && $data.failStatus()) ">
<span>hello world</span>
</span>
<div data-bind="text:$data.email"></div>
<div data-bind="if:!$data.status()">
<div data-bind="text:$data.failStatus()"></div>
</div><br/>
</div>
Instead of using if binding, I tried using visible binding, which worked properly for me.
Giving code below
function temp()
{
this.inviteeEmailList = ko.observableArray([]);
var emailList = {};
emailList['email'] = {'a#x.y , b#c.n'};
emailList['status'] = ko.observable();
emailList['failStatus'] = ko.observable();
this.showList = function()
{
for(var k in inviteeEmailList)
{
if(some_condition)
{
this.inviteeEmailList()[k]['status'](true);
this.inviteeEmailList()[k]['failStatus']("");
}
else
{
this.inviteeEmailList()[k]['status'](false);
this.inviteeEmailList()[k]['failStatus']("not exist");
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foundEmail" data-bind="foreach : inviteeEmailList">
<span data-bind="visible: $data.status()">
<span>Success</span>
</span>
<span data-bind="visible:(!$data.status() && $data.failStatus()) ">
<span>hello world</span>
</span>
<div data-bind="text:$data.email"></div>
<div data-bind="visible:!$data.status()">
<div data-bind="text:$data.failStatus()"></div>
</div><br/>
</div>

Categories

Resources