I have a view like this:
<div ng-show="">
<div style='background-color: #13a4d6; border-color: #0F82A8'>
{{headerdescription}}
<div style='float: right'>{{price}} $</div>
</div>
<div style=' width: 60%; float: left;'>
<div style='padding: 10px;margin-top: 10px;'>{{description}}</div>
<div style='padding: 10px;margin-top: 10px;'>{{softvalues}}</div>
</div>
<div style='float: right; margin-top: 10px;'>
<img src='data:image/png;base64,{{image}}'>
</div>
And i want i my angular code to get this view with the scope values set.
I tried this:
$scope.headerdescription = "YEEES";
$http.get('App_JsQuote/directives/door.html').success(function (html) {
console.log(html);
});
but the problem is that the scope-values are not set and therefor the view becomes as before. How can i set the scope-values and then get the view with all the data that should be there?
I'm not sure but can you try with something like this ?
$scope.headerdescription = "YEEES";
$scope.apply(function() {
$http.get('App_JsQuote/directives/door.html').success(function (html) {
console.log(html);
});
});
You can need to use the ngCloak directive globally in the controller or use the ngBind directive in the element. In the case you need to create media or link uri you need to use the $sce service.
Example:
<div ng-show="">
<div style='background-color: #13a4d6; border-color: #0F82A8'>
<span ng-bind="headerdescription"></span>
<div style='float: right' ng-bind="price + '$'"></div>
</div>
<div style=' width: 60%; float: left;'>
<div style='padding: 10px;margin-top: 10px;' ng-bind="description"></div>
<div style='padding: 10px;margin-top: 10px;' ng-bind="softvalues"></div>
</div>
<div style='float: right; margin-top: 10px;'>
<img ng-src='url'>
</div>
In your JS file you need to use $sce to filter and generate the url var.
Example:
$scope.url = $sce.trustAsResourceUrl('data:image/png;base64,' + $scope.image);
Related
Can you please take a look at this demo and let me know why I am not able to inject clicked element attribute data data-css to data attribute of color-box? as you can see I am able to print it out in the console by
console.log(jQuery(this).data('css'));
But the
jQuery('.current-color').data('css', jQuery(this).data('css'));
is not setting the data attribute for target element .current-color
jQuery(".color").on('click', function() {
jQuery('.current-color').css('background', jQuery(this).data('color'));
jQuery('.current-color').data('css', jQuery(this).data('css'));
console.log(jQuery(this).data('css'));
jQuery('.current-color-name').text(jQuery(this).find('.color-name').text());
});
.color-box {
width: 100px;
height: 100px;
cursor: pointer;
background:#eee;
border:2px solid #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="current-color" data-css="">
<div class="color-box current-color-name">Orane</div>
</div>
<div class="colors">
<div class="color-box color" data-css="red.css" data-color="#f44336">
<div class="color-name">red</div>
</div>
</div>
Try to use .attr('data-anything') instead of .data('anything') It works here
$(".color").on('click', function() {
$('.current-color').css('background', $(this).attr('data-color'));
$('.current-color').attr('data-css', $(this).attr('data-css'));
console.log($(this).attr('data-css'));
$('.current-color-name').text($(this).find('.color-name').text());
});
.color-box {
width: 100px;;
height: 100px;
cursor: pointer;
background:#eee;
border:2px solid #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="current-color" data-css="">
<div class="color-box current-color-name"></div>
</div>
<div class="colors">
<div class="color-box color" data-css="red.css" data-color="#f44336">
<div class="color-name">red</div>
</div>
<div class="color-box color" data-css="orange.css" data-color="orange">
<div class="color-name">Orange</div>
</div>
<div class="color-box color" data-css="blue.css" data-color="blue">
<div class="color-name">Blue</div>
</div>
</div>
The reason why 'data-' atrribute could not work was that when you first used the $('..').data(' ') method to get the attribute value after you set it by
$('..').data(' ',' ') method,jquery stored the value so that when you clicked again,the value had not changed.
I thought reason was more important than solution for a developer.I hoped this could help.
i am making a kind of storyboard where you can add and remove frames but i need to set divs next to each other, the code i now have it places the div's beneath each other. I want to make it with a loop
Here is my code:
HTML
<div id="storyboard">
<div id="container">
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
<div type="button" value="fade_in" class="add__button"> + </div>
</div>
</div>
</div>
</div>
JS
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
Use append() instead of after() function. This should work:
_this.addClickFunction = function() {
var i = 0;
$('.add__button').click(function() {
$('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
});
};
This works for keeping one .frame element and adding multiple divs to it of the structure:
<div class="container[i]">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content"></div>
</div>
</div>
If you want to arrange elements side by side which normaly are block elements and thus are positioned underneath eachother by default use either css floats or css flexbox.
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
i need to set divs next to each other
Try this example to add new story container to all current .container
var i = 1;
$('.add__button').click(function() {
i++;
$(".container").each(function(x) {
$(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
});
});
.frame__outer {
padding: 20px;
background: #222;
color: white;
border-bottom: solid 3px green;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
<input type='button' value='add story' class="add__button" />
<div id="container" class='container'>
<div class="frame">
<div class="frame__outer">
<div class="frame__inner"></div>
<div class="frame__content">story 1</div>
</div>
</div>
</div>
</div>
I'm writing a page that has angular in it that responds to ajax requests and loads various data into a table. The angular works as expected when I type in the address, but if I use a link ( link ) to get to the page, the controller fails to load (but the html shows up). There are no page errors in the console except a resource not loaded for an image because the url is not being loaded by the angular. Here is my code:
<h1 style="text-align: center;">Product Search</h1>
<input type="text" class="form-control" placeholder="Search (Ex. ea-004, Christmas)..." id="search" style="margin-left: auto; margin-right: auto; margin-bottom: 15px;">
<div ng-app="search_results" style="text-align: center; margin-left: 0px; margin-right: 0px;">
<div ng-controller="search_results_ctl" style="text-align: center; margin-left: 0px; margin-right: 0px;">
product{{JSON.stringify(product)}}
<style>
.product:hover{
background-color: #DDDDDD;
cursor: pointer;
border:0px solid grey;
border-radius: 5px;
}
.product-selector:hover {
color: black;
}
</style>
<script>
var app = angular.module("search_results", ['angularUtils.directives.dirPagination']);
app.controller("search_results_ctl", ['$scope', function($scope){
console.log("Angular loaded...");
$scope.results = "";
$('#search').keypress(function(ev){
if(ev.which != 13){//do not add enter to search text, just submit query again
s_term = $('#search').val() + String.fromCharCode(ev.which);//append last character typed
}else{
s_term = $('#search').val();
}
$.ajax({
url: "/query",
data: {s_term: s_term},
success: function(data){
//console.log("products: " + data);
$scope.products = JSON.parse(data);
$scope.$apply();
}
});
});
}]);
</script>
<span ng-if="products != null">
<div style="width: 80%; margin: auto !important;
" dir-paginate="product in products | itemsPerPage: 10" class="row product">
<a href="/orders/new?product_id={{product.id}}" class="product-selector">
<div class="col-md-3 col-sm-3">{{product.title}}</div><div class="col-md-6 col-sm-6">{{product.description}}</div><div class="col-md-3 col-sm-3" style="text-align: center"><img src='{{product.image}}' width="50px" height="50px" style="margin-top: auto; margin-bottom: auto;"></div></a>
</div>
</span>
<span ng-if="products == null" >
<div style="background-color: #DDDDDD; border: 0px solid grey; border-radius: 5px;">
<h3 style="text-align: center;">Creating an Order</h3>
<p><strong>To start</strong>, type in the product code from the website or a key word like "christmas" or "sports". Click the product you would like to order, and it will take you to the order page.</p>
</div>
</span>
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
the link that is directing my to the page uses an href of "/products/search", which is the correct route.
Any help would be most appreciated!
Turns out after some further reading turbolinks was causing the problem. Turbolinks does not allow a full page reload, so angular never got fully bootstrapped. Here is a more thorough post on the issue: Using angularjs with turbolinks
I have defined a list and template as below. I am defining list item data source from html. Is there any way to bind the item data source dynamically i.e.from javscript. Its an angular-winjs application.
<win-list-view selection-mode="'none'"
id="liqAssetListFlyout"
class="verticalList win-selectionstylefilled win-listview"
style="height: auto;"
item-data-source="LiqFlyout"
itemtemplate="select('.liqListTemplate')">
<win-item-template>
<div class="liqListTemplate" data-win-control="WinJS.Binding.Template">
<div style="float: left; width: 36%; margin-top: 1.5%;">
<label id={{item.data.index}} class="T20" style="float: left;">{{item.data.assetName}}</label>
</div>
<div style="float: left; width: 33%; margin-top: 1.5%;">
<label class="T20 " style="float: left; ">{{item.data.Internal}}</label>
</div>
<div style="float: left;margin-top: 1.5%;">
<label class="T20 " style="float: left; ">{{item.data.External}}</label>
</div>
</div>
<hr ng-if="showHideLine(item.data.assetName)" style="float:left; width:100%;margin-top:2%" />
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
var items[..data..];
var bindList = new WinJS.Binding.List(items);
var listView = document.getElementById("liqAssetListFlyout").winControl;
listView.itemDataSource = bindList.dataSource;
that would be the way from javascript
I want to know the Client div position
var p = $('div#Client');
var position = p.position();
$('div#Client').fadeTo('slow',.6);
$('div#Client').append('<div style="position: absolute;top:' + position.top + ';
left:' + position.left + ';width: 100%;height:100%;z-index:2;opacity:0.4;
filter: alpha(opacity = 50)"></div>');
The result is:
Position.left = 0 and Top = 0
so the new Div in the Jquery code is on all the page
what I need is to put the new div on top of the div#Client
HTML code:
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Client</div>
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
this is : http://jsfiddle.net/aaNUa/14/
Actually what's I'm trying to do is to block the Div Client but keep the Div Sales activated for editing. with this code all the page is blocked.
Use before() method in Jquery :
$(document).ready(function(){
$("div#Client").before('<div class="Title">Client</div>');
});
fiddle : http://jsfiddle.net/aaNUa/
HTML Code :
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div class="Title">Sales</div>
<div id="Sales" class="Content">
Some infos for Sales person here
</div>
</div>
</div>
<div style="margin-left: 10px; margin-bottom: 10px; padding-bottom: 15px">
<div id="Client" class="Content">
Some infos for the client here
</div>
</div>
</div>
add this to your CSS:
div#client{
position:relative;
}
so that the inner DIV which is absolutely positioned will properly align with the parent div.
Make the content of function append() in one line.