Develop Reference

How an i change the pagination-control numbers(1 2 3) to other values like 'Anything1 Anything2 ...' using ngFor* on array in ngx-pagination?

Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
The above code will display pagination numbers like
I want to replace the number with values from an array [Anything1, Anything2, Anything3].
Here my data is fixed and I know my page number count and its details.

You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.
Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template
<pagination-template #p="paginationApi"
[id]="config.id"
(pageChange)="config.currentPage = $event">
<div class="custom-pagination">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>Anything{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>Anything{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
</div>
</pagination-template>

Using generic array name in template

I am really new to vue.js and HTML. I have two components that are working together. A photo-gallery and a tag-component. The tag-component uses the tags array to get the tags for a image. What i would like is to have a tag array for each image. I figured i could use the imageIndex and append that to the array name so I was string something like :tags=tags+imageIndex.
But if I do that, it does not work (i think it is not recognized as an array any more...) . My question is, is there a way to enter that in to the template, so that i have for each image an array with the name tags{index}?
Many thanks for the help!
Robin
<div id="SingleFile">
<button
id="refreshbtn"
class="btn btn-primary btn-margin"
#click="updateFileList">
refresh
</button>
<gallery :images="images" :index="index" #close="index = null"></gallery>
<div
:key="imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
#click="index = imageIndex"
class="image"
v-for="(image, imageIndex) in images"
>
<div>
<vue-tags-input
v-model="tag"
:tags="tags"
#tags-changed="newTags => tags = newTags"
/>
</div>
</div>
<div class="upload">
<upload-image url="http://localhost:8080/user" name="files" max_files="100"></upload-image>
</div>
</div>

You could use a method to achieve that:
<vue-tags-input
v-model="tag"
:tags="getTags(imageIndex)" ... >
and define it like :
methods:{
getTags(i){
return this['tags'+i];
}
}
by assuming that you have in your data object something like :
data(){
return{
tags0:[],
tags1:[],
...
}
}
or any property which has that syntax tags+index

AngularJs : ng-click() accepting invalid arguments

I use the following code snippet to list an array of objects in html document
, it shows the list of link accurately ...
<div ng-repeat="item in List">
<a ng-click="Show('{{item.name}}');"> ShowName </a>
</div>
it outputs the following html code:
<a ng-click="Show('name1')">ShowName</a>
.
.
.
<a ng-click="Show('//upto nth name')">ShowName</a>
Here is my angular code :
$scope.Show=
function(getName)
{
alert(getName);
}
but when I click on any link it shows "{{item.name}}" instead of showing "name1" or respective name in the alertbox...
I also tried
Show('{{item.name}}');
but the result is same...
what I am doing wrong????

You are not supposed to use {{}} inside an Angular directive. Your code should be like this:
<div ng-repeat="item in List">
<a ng-click="Show(item.name)"> ShowName </a>
</div>

You can either use following style
<li ng-repeat="item in List">
{{item.name}}
</li>
here $index represent index of your array. i prefer to use this because here you can access full object.then just do what you want.
$scope.clickit = function(x) {
console.log($scope.List[x])
}
if you don't like the above style you can use the below style
<li ng-repeat="item in List">
{{item.name}}
</li>

The problem here is that you are using ' and {} when passing the variable as an argument to the function.
Change
<a ng-click="Show('{{item.name}}');"> ShowName </a>
to
<a ng-click="Show(item.name);"> ShowName </a>

Vue JS does renders braces instead of result

Im using Vue JS (2.0.8) to render a list of devices. I have a health status that is represented by a number, so I use a method to convert the number to a CSS class to display it correctly. The problem is that Vue does not render the result of the method, but the method call itself.
My Vue method:
methods: {
...
health: function (device) {
if (device !== null) {
switch (device.health.status) {
case 2:
return "connected";
break;
case 1:
return "warning";
break;
case 0:
return "disconnected";
break;
case -1:
default:
return "unsupported";
break;
}
}
},
...
}
My HTML (Im using Laravel, hence the '#'):
<div v-for="device in devices" class="device">
<div class="device-top">
<div class="device-bullet #{{ health(device) }}"></div>
<div v-on:click="device.open = !device.open" v-bind:class="{open: device.open}" class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
</div>
</div>
This renders the following HTML:
<div class="device>
<div class="device-top">
<div class="device-bullet {{ health(device) }}"></div>
<div class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
</div>
</div>
However, this is the odd bit. If I move the #{{ health(device) to inside the device-bullet div instead of using it in an attribute, it renders like this (correctly, "connected" being the result of the function).
<div class="device>
<div class="device-top">
<div class="device-bullet">connected</div>
<div class="device-more-info"><span class="icon icon-show-more"></span>More info</div>
</div>
</div>
I have tried any combination I can think of to get it to render correctly but cannot seem to find the problem.
Any help is appreciated, thank you in advance.

Interpolation within attributes has been removed in Vue 2.x
Use v-bind:class instead:
<div class="device-bullet" v-bind:class="[health(device)]"></div>

Not sure of how laravel works, never used before.
But in "pure" vue can't use {{}} syntax to bind a html property. You need to use v-bind directive
<div v-bind:class="'device-bullet '+ health(device)" ></div>
Without v-bind: you're literally using device-bullet {{ health(device) }} as value.
For more clarification check this docs section

How can I show images on load with Angularjs?

I am trying to hide an image until it is loaded, and then use the onload method to call a jQuery function that shows it. I use the angular ng-repeat property $index to assign a unique ID to each image div. The $index property works, since all my images have ID's like img0, img1, and so on. My problem is that onload is not passing the angular variable, which contains the unique div ID, to my function. Are angular variables unable to be used inside the onload method? If not, how can I make it so?
<div class="hello" ng-repeat="artist in artists" ng-hide="!artiste">
<div class="paintings" id="img{({$index})}" style="display:none;">
<a href="{({ artist.fields.link })}">
<img src="{({ artist.fields.link })}" onload="showImageDiv(img{({$index})})" />
</a>
<h3> {({ artist.fields.title })} </h3>
</div>
</div>
<script>
function showImageDiv(imageDivId){ // never receives imageDivId
$('#' + imageDivId).show();
};
</script>

It doesn't work this way - attribute onload is not a directive, so its value is not parsed by angular. You could use a custom directive though, for example (assuming there is a "myModule" module defined):
angular.module("myModule").directive("showOnLoad", function() {
return {
link: function(scope, element) {
element.on("load", function() {
scope.$apply(function() {
scope.artist.visible = true;
});
});
}
};
});
It would set the artist.visible field value to true after the load event. This should work after some changes to the markup:
<div class="paintings" ng-show="artist.visible">
<a href="{{ artist.fields.link }}">
<img ng-src="{{ artist.fields.link }}" show-on-load /></a>
<h3> {{ artist.fields.title }} </h3>
</div>

You should use ng-init instead. Replace
onload="showImageDiv(img{({$index})})"
with
ng-init="showImageDiv($index)"
And since you are using angular, make use of your controller. Inside your controller, write this:
$scope.showImageDiv = function(index){
jQuery('#img'+index).show();
}
Update :
You can also make use of ng-show, instead of jQuery:
<img src="{({ artist.fields.link })}" ng-init="showImageDiv($index)" ng-show="img[$index]" />
And in controller:
$scope.img=[];
$scope.showdiv = function(index){
$scope.img[index] = true;
}