Trying to set a default background picture using Angular.js - javascript

I'm new to Angular.js and I'm running into a problem. I'm using ng-repeat to iterate through a list of news items. Each item has a Title and Body, but will have an optional picture url that will be used as the background.
I can get the news item elements with picture URLs to display when there is a url present. See sample code below.
<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url}})'}">
I need to set the announcement.Url value to a default background picture URL when announcement.Url is NULL or Undefined. Not sure how I can go about this.
Any help would be much appreciated.
Thanks!

<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url || \'path to default image\'}})'}">
Anything between {{ and }} is an angular expression (similar to javascript itself as far as a beginner is concerned). You can simply include the || operator (a logical OR) and put the path to your default image in a string after that. If announcement.Url is null or undefined then it will be "falsy" and the latter half of the OR conditional will be used.
Edit: Notice that I escaped the string delimiters (\') because they are already nested inside a string that uses those delimiters.

Related

How to do string interpolation in template element in Vue.js?

I am iterating through a dictionary (called in from a .json file) and would like to check an attribute of my props with a value in the dictionary. In my first div I am setting the variable attribute to be one of the values in the dictionary. This attribute variable has the value "event" which is exactly what I want.
In the inner div, the props.item.${attribute} code is not evaluating to props.item.event, which is what I thought it would. Is there any way to interpolate the value of this variable to my props statement?
<div
v-for="data in dict"
:set="attribute = data.targetAttr"
>
<div v-if="props.item.attribute == data.key">
<a
:href="data.response"
target="_blank"
>
More Info
</a>
</div>
</div>
I have tried looking at the resource here, but the answer is only in relation to effectively mapping over lists, which is not exactly my problem.
VueJs - How to use variable in v-if?
In that case, you should try the following
<div v-if="props.item[attribute] === data.key">

HTML Symbols not loading dynamically in Angular

I am working with some Angular and firebase code in which I am requesting some data from firebase and displaying them, simple stuff, but...
I had an array of string which contains some data like so,
[
"Refraction"
"折光"
]
the second one is HTML symbols and when I tried to render it to screen using angular interpolation
this happened
<p _ngcontent-rnr-c24>折光</p>
and when I manually hard code this to HTML file this is what I get
<p _ngcontent-rnr-c24>折光</p>
which is what I wanted...
Any help is appreciated, thank you
Since it's an HTML Symbol you might just be better off doing it like this:
<ng-container *ngFor="let symbols of symbols">
<p [innerHTML]="symbol"></p>
</ng-container>

ng-bind-html doesn't connect different things in once (not even with $sce.trustAsHtml() )

I am trying to connect some different html code to my view with ng-bind-html.
I already added ngSanitize
Firstly I am using ng-for by ui-select-choices
<ui-select-choices repeat="test in dataTest>
. and I want to bind test.name with some Html
<small> ( {{ TEST_BTN | translate }}) </small>
The Test_BTN is being used for Translation purpose there fore I can't leave it out from code.
when I try to use them all in ng-bind-html nothing will be shown
when I try to use them all in ng-bind the html code will be shown.
when I try to use ng-bind andng-bind-html seperetly , ng-bind-html html won't be shown.
How am I suppose to fix this?
EDIT : I am trying to show the result in a new div with ng-if
something like : <div data-ng-if="test.isSomething" ng-bind="test.name" ng-bind-html="' <small>({{'BTN_ADD' | translate}})</small>'" ></div> (Which doesnt show the ng-bind-html part )
EDIT 2 :
I deleted the {{ }} from data-ng-bind-html and used the translation explicitly with the $translate service in my controller.
And It worked.
You can't use ng-bind and ng-bind-html on the same element, and you can't use {{}} in either one of them. It's not necessary to concatenate the <small> tag inside the ng-bind-html, it should be in the template itself. And you have some syntax error nested-quotes issues in your ng-bind-html clause.
It's not clear to me from your description which of test.name, TEST_BTN or BTN_ADD you actually intend to use; I'm going to assume you really want test.name here but if one of those other variables contains the HTML you're trying to embed, just substitute its name in place of test.name:
<div ng-if="test.isSomething">
<small ng-bind-html="test.name | translate"></small>
</div>

Angular JS: Pagination using the Pagination Directive JS without using the Pagination.tpl.html Template

I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.
The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.
I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.
The guides I am following is found here which is the same as the repository above.
Downloaded files and added to project:
dirPagination.js
My HTML is as follows:
<div id="pages" ng-if="1 < pages.length || !autoHide">
<span ng-class="{ active : pagination.current == pageNumber,
disabled : pageNumber == '...' }" class="pagenumber"
dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
controller.pageCount" current-page="controller.currentPage">
{{ pageID.id }}
</span>
</div>
<div class="myResults" dir-paginate="results
in controller.list| filter:q | itemsPerPage: 5" current-page="1">
<div class="listFigures">
<figure class="imageList">
<img ng-src="{{results.image}}" ng-alt=
{{results.imageAlt}}" ng-title=
{{results.imageTitle}}" />
</figure>
</div>
</div>
In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):
vm.pageCount=2;
vm.currentPage = 1;
Working:
The list of pages is showing, following the code above you will see that it is at 8 pages.
Only 5 items are displaying as indicated
Not working:
Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.
Posts researched:
dirPagination does not work (Angular JS pagination)
Pagination with AngularJS?
dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?
I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.
Following best practices you can read here for standard Angular.
You hardcoded your current page in the directive at the end:
<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">
To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.
After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.
Here is the working solution. Only thing that required changing was in the html:
<div class="results">
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
<div class="pages" ng-if="1 < pages.length || !autoHide"
class="pagenumber pagination" dir-paginate="pageID in
controller.list| filter:q | itemsPerPage:5"
ng-class="{ active : pagination.current == pageNumber, disabled :
pageNumber == '...' }">
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-repeat="pageNumber in pages track by tracker(pageNumber,
$index)" ng-class="{ active : pagination.current ==
pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}
</a>
</li>
</ul>
</div>
</div>
Feel free to copy past all that html in your document and use classes I made:
results
pages
pagination
To change the CSS however you like.
Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.
Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.

Setting attribute values in AngularJS

I have a template that contains the following fragment:
<spark class="col-12" value="80"></spark>
I also have a variable accessible to this template as {{ratio}} such that if I change my fragment to:
<spark class="col-12" value="80"></spark>
Ratio: {{ratio}}
the correct ratio will be displayed on a page.
This is what does not work:
<spark class="col-12" value="{{ratio}}"></spark>
which results in "{{ratio}}" string being displayed.
Any ideas ?
You should be using the built-in directives for adding attribute values from the scope, for example ng-src, ng-style, ng-href, so on.
Documentation for the built-in directives
Will ng-attr work for you? ng-attr-value="{{ratio}}"
https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

Categories

Resources