I want to create a multiple items slider to list some players using ng-repeat (Angular 1.6). I'd like to add a prev/next buttons in the ul>lis to access the next or previous player in the array, shifting the view item by item.
HTML----sliderdemo.html
<div ng-controller="SliderDemoCtrl">
<div class="champions-slider">
<ul class="team-members list-inline text-center" style="display:flex" >
<li ng-repeat="player in players | limitTo: 4" style="padding:10px">
<div class="img-holder">
<img ng-src="{{ player.image }}" alt="{{player.name}}" width="20px">
</div>
<strong class="name">{{ player.name }}</strong>
</li>
</ul>
Prev
Next
</div>
</div>
My controller js---slider.demo.controller.js
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
}
];
}]);
Here is a plunkr of the question: https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview
Any help would be greatly appreciated.
Thx!
I think you are searching like below solution :
// Code goes here
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
},
];
$scope.size=0;
$scope.next=function(){
if($scope.size+4==$scope.players.length)
return;
$scope.size+=1;
}
$scope.prev=function(){
if($scope.size==0)
$scope.size=0;
else
$scope.size-=1;
}
}]);
<!doctype html>
<html ng-app="slider.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="SliderDemoCtrl">
<div class="champions-slider">
<ul class="team-members list-inline text-center" style="display:flex" >
<li ng-repeat="player in players | limitTo: 4" style="padding:10px">
<div class="img-holder">
<img ng-src="{{ players[$index+val].image }}" alt="{{players[$index+val].name}}" width="20px">
</div>
<strong class="name">{{ players[$index+size].name }}</strong>
</li>
</ul>
Prev
Next
</div>
</div>
</body>
</html>
You can handle the pagination by ng-if using a $index.Just go through Plunker
$scope.pre = 0;
$scope.nex = 4;
$scope.nextItem = function(){
$scope.pre = $scope.nex;
$scope.nex = $scope.nex + 4;
}
$scope.prevItem = function(){
$scope.nex = $scope.pre
$scope.pre = $scope.pre - 4;
}
Related
I have a component that I would like to use in another in order to make a navigation menu. I want separate the menu from links. How can I display data in a child component in another parent component? I use Vue.js CDN.
I am a newbie in using vue.js. Thank you for your help.
index.html
<div id="navbar"><navbar-div></navbar-div></div>
navbar.js:
Vue.component('navbar-content', {
props: ['name', 'link'],
template: '<a class="navbar-item" v-bind:href="link">{{ name }}</a>'
})
Vue.component('navbar-div', {
props: ['links'],
template: `
<nav class="navbar is-dark">
<div class="navbar-brand">[...]</div>
<div class="navbar-menu">
<nav class="navbar-start">
<navbar-content v-for="item in links"
v-bind:key="item.id"
v-bind:name="item.name"
v-bind:link="item.link">
</navbar-content>
</nav>
</div>
</nav>
`})
new Vue({
el: "#navbar",
data: {
links: [
{id: 1, name: "Item 1", link: "link1"},
{id: 2, name: "Item 2", link: "link2"}
],
}
})
In your HTML you have to bind the links to navbar-div; otherwise it's not going to receive the data as props
Vue.component('navbar-content', {
props: ['name', 'link'],
template: `
<a
class="navbar-item"
:href="link"
>
{{ name }}
</a>
`
})
Vue.component('navbar-div', {
props: ['links'],
template: `
<nav class="navbar is-dark">
<div class="navbar-brand">[...]</div>
<div class="navbar-menu">
<nav class="navbar-start">
<navbar-content
v-for="item in links"
:key="item.id"
:name="item.name"
:link="item.link"
/>
</nav>
</div>
</nav>
`
})
new Vue({
el: "#navbar",
data: {
links: [{
id: 1,
name: "Item 1",
link: "link1"
},
{
id: 2,
name: "Item 2",
link: "link2"
}
],
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="navbar">
<navbar-div :links="links"></navbar-div>
</div>
I have an object like so:
$scope.group = {
"Jim Jenkins": {
"Blue": {
"Circle": [
"Item1",
"Item2",
"Item3"
]
}
},
"Rachel Smith": {
"Blue": {
"Circle": [
"Item 1"
]
},
"Red": {
"Circle": [
"Item 1",
"Item 2"
]
}
}
}
I created a nested ng-repeat function that cycles through the object and displays it.
<script type="text/ng-template" id="group.html">
<ul style="padding:10px;">
<li type="none" ng-repeat="(i, c) in group">
<div ng-click="test(i)" style="background-color:#fff;padding:5px;" ng-if="i.length > 0">{{ i }}</div>
<div ng-click="test(c)" style="background-color:#fff;padding:5px;margin-bottom:5px;" ng-if="!i.length">{{ c }}</div>
<div ng-switch on="i.length > 0">
<div ng-switch-when="true">
<div ng-init="group = c;" ng-include="'group.html'"></div>
</div>
</div>
</li>
</ul>
</script>
<div ng-include="'group.html'" ng-model="group"></div>
My only issue is, now I have now way of linking back to the original $scope.group object. I have a ng-click where I display the items and I'd like to be able to know where this element is located (so I know what the parent is, know how many levels in, add more items, etc).
Does anyone know how I can achieve this?
Try like this
var app = angular.module("app", []);
app.controller('mainCtrl', function($scope) {
$scope.isArray = angular.isArray;
$scope.group = [{
"Jim Jenkins": {
"Blue": {
"Circle": [
"Item1",
"Item2",
"Item3"
]
}
},
"Rachel Smith": {
"Blue": {
"Circle": [
"Item 1"
]
},
"Red": {
"Circle": [
"Item 1",
"Item 2"
]
}
}
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div ng-app="app" ng-controller="mainCtrl">
<script type="text/ng-template" id="dummy.html">
<ul>
<li ng-repeat="(k,v) in group">
<div ng-include=" 'nested.html' " onload="group = v"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="nested.html">
<div ng-repeat="(k1,v1) in v">{{k1}}
<ul>
<li ng-if="isArray(v1)" ng-repeat="val in v1">
{{val}}
</li>
</ul>
<li ng-if="!isArray(v1)" >
<div ng-include=" 'dummy.html' " onload="group = v1"></div>
</li>
</div>
</script>
<div ng-include=" 'dummy.html'"></div>
</div>
I want to separate everything in my code according to predefined levels given , from level 1 to level 6 , now my JSON reads
$scope.myJson=[{
id: 1,
level: 1,
name: "any name"
},
{
id: 2,
level: 2,
name: "any name"
},
{
id: 3,
level: 2,
name: "any name"
}....]
now in my HTML I have written something like
<div>level 1
<div ng-repeat="prod in myJson" ng-if="prod.level==1">{{prod.name}}
</div>
</div>
<div>level 2
<div ng-repeat="prod in myJson" ng-if="prod.level==2">{{prod.name}}
</div>
</div>
and so on , I want to use only one ng-repeat to filter all the results in HTML on basis of the levels , as the results number in thousands the app is taking too much of time to respond
You could try a switch case in your ng repeat, for example :
<div ng-repeat="prod in myJson">
<div ng-switch-on = "prod.level">
<div ng-switch-when="1">
Level 1 {{prod.name}}
</div>
<div ng-switch-when="2">
Level 2 {{prod.name}}
</div>
<div ng-switch-default>
Another level {{prod.name}}
</div>
</div>
</div>
So you will only do one run over your data.
To make it more generic, groupBy will solve this for you.
Demo:
angular.module('app', ['angular.filter'])
.controller('myCtrl', function($scope) {
$scope.myJson = [{
id: 1,
level: 1,
name: "any name level1"
}, {
id: 2,
level: 2,
name: "any name level2"
}, {
id: 3,
level: 2,
name: "any name level2"
}, {
id: 4,
level: 2,
name: "any name level2"
}, {
id: 5,
level: 1,
name: "any name level1"
}, {
id: 6,
level: 3,
name: "any name level3"
}]
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<ul ng-repeat="(key, value) in myJson | groupBy: 'level'">
Level- {{ key }}
<li ng-repeat="item in value">
{{ item.name }}
</li>
</ul>
</div>
</body>
</html>
I've created a simple app that should iist each item from a model in a list, created using a javascrit template.
Fiddle
Html:
<div id="tagsList" class="box">
<div class="box-head">
<h2 class="left">Tags</h2>
</div>
<div class="box-content">
<input type="text" placeholder="Add New Tag" />
<button>+ Add</button>
<div data-bind="template: 'tagsTempl'"></div>
</div>
</div>
<script id="tagsTempl" type="text/html">
<ul>
{{each tags}}
<li class="tagItem">
<span>${Name}</span>
<div>
Edit
Delete
</div>
</li>
{{/each}}
</ul>
</script>
Javascript:
$(function () {
//$("#tagDialog").hide();
var data = [
{ Id: 1, Name: "Ball Handling" },
{ Id: 2, Name: "Passing" },
{ Id: 3, Name: "Shooting" },
{ Id: 4, Name: "Rebounding" },
{ Id: 5, Name: "Transition" },
{ Id: 6, Name: "Defense" },
{ Id: 7, Name: "Team Offense" },
{ Id: 8, Name: "Team Defense" }
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
addTag: function() {
this.tags.push({ Name: this.tagToAdd() });
}
}
ko.applyBindings(viewModel)
});
Output of list:
{{each tags}}
${Name}
Edit Delete
{{/each}}
The scripts file is accessible through viewing source. I'm not sure where my error is. Any help?
I updated your fiddle. Now it is working like you want it to: The list of tags is being rendered using the knockout standard method as described in the docs.
HTML
<ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>
Template
<script id="tagsTempl" type="text/html">
<li class="tagItem">
<span data-bind="text: Name"></span>
<div>
Edit
Delete
</div>
</li>
</script>
Also I connected the viewmodel to the view.
For example:
<button data-bind="click: addTag">+ Add</button>
You simply forgot most of it. I suggest you follow the interactive tutorials on how to do this.
Hi Please Help me i m new in angular js
i just create a function.
i m repeat the content .
i create a function who is add next tab section and remove this section.
i create a same function to another tab add prev tab section and remove this section .
But i thing only data copy this function not remove data and not show .
Please Help me
My code is this
HTML Code is
<body ng-app="taskPanel">
<div class="" ng-controller="TasksController">
<tabset panel-tabs="true" panel-class="panel-inverse">
<tab>
<tab>
<tab-heading> <span class="hidden-xs">ACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye">eye</i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushActive(this, item)">Push to InActive Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
<tab>
<tab-heading> <span class="hidden-xs">InACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksInComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye"></i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushInActive(this, item)">Push To Active Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
</tabset>
</div>
</body>
ANgular Js code is
// Code goes here
var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
$scope.tasksComplete = [
{ title: "I m first" },
{ title: "I m Second" },
{ title: "I m thrid" }
];
$scope.tasksInComplete = [
{title: "i m incompletred 1"},
{title: "i m incompletred 2"},
{title: "i m incompletred 3"}
];
$scope.remove = function(scope){
scope.remove();
};
$scope.pushActive = function(scope, item){
$scope.tasksInComplete.push(item);
scope.remove();
};
$scope.pushInActive = function(scope, item){
$scope.tasksComplete.push(item);
scope.remove();
};
}]);
and Live Demo
you can use such approatch:
Controller:
$scope.tasksComplete = [
{ title: "I m first"},
{ title: "I m Second"},
{ title: "I m thrid"}
];
$scope.pushActive = function(item) {
$scope.tasksComplete.splice(item,1);
};
veiw
ng-click="pushActive($index)"
try this, use $index for remove elements in array
$scope.pushActive = function(index, item){
$scope.tasksComplete.splice(index, 1);
$scope.tasksInComplete.push(item);
};
$scope.pushInActive = function(index, item){
$scope.tasksInComplete.splice(index, 1);
$scope.tasksComplete.push(item);
};
plunker
http://plnkr.co/edit/fp3gcf9PlBi9XnpNYFZQ?p=preview
I fixed your code and you can see it here.
The wording was messing me up. Once I change the View wording to match the controller wording, it was good.
var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
$scope.tasksInActive = [
{ title: "I m first" },
{ title: "I m Second" },
{ title: "I m thrid" }
];
$scope.tasksActive = [
{title: "i m incompletred 1"},
{title: "i m incompletred 2"},
{title: "i m incompletred 3"}
];
$scope.pushActive = function(scope, item){
$scope.tasksInActive = removeItemFromList(item, $scope.tasksInActive);
$scope.tasksActive.push(item);
};
$scope.pushInActive = function(scope, item){
$scope.tasksActive = removeItemFromList(item, $scope.tasksActive);
$scope.tasksInActive.push(item);
};
function removeItemFromList(item, list){
return list.filter(function(i){
return i != item;
});
}
}]);