I was trying to display image which is coming within the json object returning from an web api request. I'm able to display string, number and date/time in my angular partial but couldn't get the image displaying.
here is my json object which contains each field of my topic (model) class
<Topic>
<Body>dsadfsaadsfds</Body>
<Created>2014-06-15T00:00:00</Created>
<Flagged>false</Flagged>
<Id>1022</Id>
<PhotoFile>
iVBORw0KGgoAAAANSUhEUgAAB2wAAAOiCAIAAAAzNbBAAAABiWlDQ1BJQ0MgUHJvZmlsZQAAKBWtkT1LA0EQht+L0SgJGCRoCpEFRSzu5IxFTLTJB5iIRYgKane5nImQj+NyIfoD7Gy0EG0U9S+INhaWYqGFIAjB3yAEAi..........
(I want to post screen shot but i can't due to lack of reputations.....)
</PhotoFile>
<Replies i:nil="true"/>
<Title>csdaadsf</Title>
and here is my angular html partial:
<a data-ng-href="#/message/{{ i.id }}">{{ i.title }}</a>
</div>
<div class="date span2">
{{ i.created | date:"medium" }}
</div>
<div class="contents span12">
{{ i.body }}
</div>
<img ng-alt="" src="{{'data:image'+i.photofile}}" /> </div>
`
Since i can get other attributes working, my angular factory and controller should be working. Are there anything wrong with my syntax in angular partial view for displaying images? Thanks
You shouldn't be using the src attribute when using Angular expression as the value. Use ng-src instead, it will ensure the image don't show up before Angular has a chance to replace the expression.
If the sample payload you've shown is complete, the way you are forming the data URI is incomplete. Depending on the format of the image, the header should look like
data:image/png;base64,[things in the JSON]
You can read more about the format here
Related
I am trying to get a value from the lists of array from the api and use a v-if to display in the view page.
For example:
I have the response from api like this upon doing console:
list: [ "user:getAll",.................................................., __ob__: Observer]
Now i want to display some text in a box, i am displaying using like this:
<div>
<div v-if="!list === 'place:list'">
Do not show
</div>
<div v-else>Show</div>
</div>
Issue is v-if is not working i guess as it is not getting the place:list
Please suggest
You're comparing an array to a string. I'm guessing what you mean to do is check if the string 'place:list' is in the list array?
<div>
<div v-if="!list.includes('place:list')">
Do not show
</div>
<div v-else>Show</div>
</div>
I have one problem with generating routerLinks in my application.
I retrieve the menu structure from API. Fetch it when app initializes, store it in the Observable and then simply show it.
The part of the structure im showing is pretty straightforward.
<ng-container *ngFor="let item of menuItems">
<h5 class="dekstop-submenu-heading">{{ item.name }}</h5>
<ul class="desktop-submenu-list" [ngClass]="{'desktop-submenu-list-wrap': item.subItems.length > 5}">
<li *ngFor="let subItem of item.subItems" class="desktop-submenu-item">
<a [attr.aria-label]="subItem.name" [routerLink]="subItem.url">{{ subItem.name }}</a>
</li>
</ul>
</ng-container>
The problem comes when there is an url with an anchor to specific page part, i.e. /some-component/description#specific.
Angular routerLink is generated properly but the href isn't, it is decoded to /some-component/description%23specific.
I can't get rid of this behaviour, I've tried decoding it with decodeURIComponent but with no effects..
Do you have any idea what causes such behaviour? Such a simply thing makes a lot of troubles..
You just need to send the url and the element id in a separate directive.
If you have control over the subItem.url then just rename it to /description and subItem.fragment to specific and then change the template like this:
[routerLink]="subItem.url" [fragment]="subItem.fragment"
If you don't have control over subItem.url, then just perform a split on %23:
const [url, ...fragment] = subItem.url.split('%23');
[routerLink]="url" [fragment]="fragent.join('%23')"
You can handle query params in routerLink directive
I think this will help you
<a [attr.aria-label]="subItem.name" [routerLink]="subItem.url"
queryParamsHandling="preserve">{{ subItem.name }}</a>
I have a angular js application, in which I am retrieving http response data using rest services. I want to conditionally display the part of the page. For eg: if the response data in angular is "manager" , the page should have different options displayed and if the response data is "employee" , same part of webpage should display different options.
How do I do that?
This is single page application.
For your requirement you can use ng-switch directive. The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.
For your example:
<div ng-switch="expression">
<div ng-switch-when="manager">...</div>
<div ng-switch-when="employee">...</div>
</div>
Here expression will contain info you get from response data of either manager or employee.
Hope this will be helpful to you!
You can use ng-show directive like:
<div>
<div ng-show="employeeType == 'Manager'"> </div>
<div ng-show="employeeType == 'employee'"> </div>
<div>
For more information refer to this link: https://docs.angularjs.org/api/ng/directive/ngShow
I would like to show the result of the query from the database on my html view.
When I run my raw sql aggregate query in the Django shell, I get the result I'm looking for. But when I pass the data into my html from the view, it does not show any data.
My views.py and I also have the model imported
def officehome(request):
"""Renders the office home page."""
assert isinstance(request, HttpRequest)
ordersrecieved = FbsOrderT.objects.count()
return render(
request,
'app/officehome.html',
{"ordersrecieved": ordersrecieved}
)
this is in the html view
<ul class="list-group">
<li class="list-group-item">
<h5 class="list-group-item-heading">Orders Received <span {ordersrecieved}></span></h5>
</li>
Would angular routing be a problem and not knowing when to execute the query.
This is wrong:
<h5 class="list-group-item-heading">Orders Received <span {ordersrecieved}></span></h5>
what you want is:
<h5 class="list-group-item-heading">Orders Received <span> {{ ordersrecieved }}</span></h5>
The way templating works is it converts {things which are in here to the python variable context} so if it is in the text of the html it will work if its an attribute of the span (as in <span {gergerg}>) then that might render but as nothing visible to the user. Also use {{ }} rather than { unless you specified a custom templating parser.
How to compare string with request parameter in html in Thymeleaf tag "th:if" ?
right now i am using this
<div class="error" th:if="${param.error == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
But no luck, it is not working.
It's not working because param.error is array of strings. You must retrieve first element of array (param.error[0]) to get first value of parameter (see documentation). Besides that you can access request parameter via Web context object method #httpServletRequest.getParameter that returns first value when parameter is multivalued (see documentation).
Usage of Web context namespaces for request attributes
<div class="error" th:if="${param.error[0] == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
Usage of Web context object
<div class="error" th:if="${#httpServletRequest.getParameter('error') == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
With Thymeleaf 3, I normally use #request (a short form of #httpservletrequest) and #strings.equals() for that, which will look like this:
<div th:if="${#strings.equals(#request.getParameter('error'), 'badCredentialsException')}"></div>
This worked well for me
#strings.equals(string1, string2)