I'm using ng-repeat to print an array in my controller. My problem is that i want my repeat to start listing from the top after my n:th item, like this:
Item 1 Item 6 Item 11
Item 2 Item 7 Item 12
Item 3 Item 8 Item 13
Item 4 Item 9 Item 14
Item 5 Item 10 Item 15
My code:
HTML
<div class="participant-list" >
<div class="participant" ng-repeat="speaker in participants | orderBy:'name'" ng-click="addSpeaker(speaker.id)">{{speaker.name}}, {{speaker.city}}</div>
</div>
CSS
.participant-list {
height: 800px;
}
.participant {
margin: 5px 0px;
padding: 2px 0px;
cursor: pointer;
}
Is there any good way to do this?
It is not the most elegant solution, but it works. It does not work if the number of items is not a multiple of three (or however many columns you want). To fix that you could add blank items to the array. You will also have to sort it in the controller manually.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>NG Repeat Column Wrapping</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="./ctrl.js"></script>
</head>
<body ng-controller="ctrl">
<div class="container">
<div class="row" ng-repeat="x in rowsCount">
<div class="col-sm-4">
<span>{{ names[$index] }}</span>
</div>
<div class="col-sm-4">
<span>{{ names[$index + 5] }}</span>
</div>
<div class="col-sm-4">
<span>{{ names[$index + 10] }}</span>
</div>
</div>
</div>
</body>
</html>
ctrl.js
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.names = ["Bob", "Susan", "Mark", "John", "Billy", "Ted", "Marcy", "Wilma", "Jeff", "Yasmin", "Pete", "Taylor", "Matthew", "Laney", "Jesus"];
$scope.rowsCount = [];
$scope.createRows = function() {
for (var i = 0; i < ($scope.names.length / 3); i++) {
$scope.rowsCount.push(i);
}
};
$scope.createRows();
});
Related
here I want to add two different class to two button using x-editable angular.
<div ng-app="app" ng-controller="Ctrl">
<div>Email: {{ user.email || 'empty' }}</div>
</div>
you need to configure for all the buttons at once like so
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'bs3';
editableThemes.bs3.buttonsClass = 'class1';
});
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'bs3';
editableThemes.bs3.buttonsClass = 'class1';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});
div[ng-app] {
margin: 50px;
}
.class1 {
color: green !important;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css" rel="stylesheet" />
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<h4>Angular-xeditable Customize input (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<a href="#" editable-text="user.name" e-required e-placeholder="Enter name" e-class="class1 class2">
{{ (user.name || 'empty') | uppercase }}
</a>
</div>
here I am using Angular x-editable. I want to add the class directly to the input element and buttons
<div ng-app="app" ng-controller="Ctrl">
<div>Email: {{ user.email || 'empty' }}</div>
</div>
How about using e-class="class1 class2" refer here
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});
div[ng-app] {
margin: 50px;
}
.class1 {
color: green !important;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css" rel="stylesheet"/>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<h4>Angular-xeditable Customize input (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<a href="#" editable-text="user.name" e-required e-placeholder="Enter name" e-class="class1 class2">
{{ (user.name || 'empty') | uppercase }}
</a>
</div>
I have an HTML file which displays 2 lists using AngularJS file with 2 controllers and a service. The lists are arrays which are being correctly updated in the model, as evidenced by the console.log output. But the HTML doesn't display the updated list2 (data stored in the angularJS service). Can someone tell where I am going wrong?
Tried looking at the API, angular directives, Controller As syntax and inheritance concepts.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ShoppingListCheckOff">
<head>
<title>Shopping List Check Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
<style>
.emptyMessage {
font-weight: bold;
color: red;
font-size: 1.2em;
}
li {
margin-bottom: 7px;
font-size: 1.2em;
}
li > button {
margin-left: 6px;
}
button > span {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Shopping List Check Off</h1>
<div class="row">
<!-- To Buy List -->
<div class="col-md-6" ng-controller="ToBuyController as toBuy">
<h2>To Buy:</h2>
<ul>
<li ng-repeat="item in toBuy.list">
Buy {{ item.name }} {{ item.quantity }}
<button ng-click="toBuy.bought($index)" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span> Bought
</button>
</li>
</ul>
<div ng-if="!toBuy.list.length" class="emptyMessage">Everything is bought!</div>
</div>
<!-- Already Bought List -->
<div class="col-md-6">
<h2>Already Bought:</h2>
<ul>
<li ng-repeat="item in bought.list">Bought {{ item.quantity }} {{ item.name }}</li>
</ul>
<div ng-if="!bought.list.length" class="emptyMessage">Nothing bought yet.</div>
</div>
</div>
</div>
</body>
</html>
App.js
(function() {
'use strict';
angular
.module('ShoppingListCheckOff', [])
.controller('ToBuyController', ToBuyController)
.controller('AlreadyBoughtController', AlreadyBoughtController)
.service('ShoppingListCheckOffService', ShoppingListCheckOffService);
ToBuyController.$inject = ['ShoppingListCheckOffService'];
function ToBuyController(ShoppingListCheckOffService) {
var toBuy = this;
toBuy.list = ShoppingListCheckOffService.getList(1);
toBuy.bought = function(itemIndex) {
ShoppingListCheckOffService.transfer(itemIndex);
};
}
AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
function AlreadyBoughtController(ShoppingListCheckOffService) {
var bought = this;
bought.list = ShoppingListCheckOffService.getList(2);
}
function ShoppingListCheckOffService() {
var service = this;
// List of shopping items
var list1 = [
{ name: 'Cookies', quantity: 10 },
{ name: 'Bananas', quantity: 100 },
{ name: 'Toys', quantity: 6 },
{ name: 'Dildos', quantity: 300 },
{ name: 'Yaakovs', quantity: 1 }
];
var list2 = [];
service.transfer = function(itemIndex) {
list2 = list2.concat(list1.splice(itemIndex, 1));
console.log('List 1', list1);
console.log('List 2', list2);
};
service.getList = function(num) {
if (num == 1) {
return list1;
}
if (num == 2) {
return list2;
}
};
}
})();
The issue is that concat does not change the original array. It creates a new array. When you do list2 = list2.concat(list1.splice(itemIndex, 1)); you are setting list2 to a new array but bought.list is still set to the old array so it doesn't change.
One solution would be to
replace
list2 = list2.concat(list1.splice(itemIndex, 1));
with
list2.push(list1.splice(itemIndex, 1)[0]);
I have got the following sample html.
Files variable is a simple array of integers, like [1,2,3,4,5,6]
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<!--<script src="../app.js"></script>
<script src="../Controller/applicationCtrl.js"></script>-->
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
$scope.showAll = false;
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
height: 70px;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}">
<div ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a>
</div>
</body>
</html>
If the length of files array is more than 3 then it adds the overflow css to the div. But I also set the height of the div to a fixed value. What I would like to do is to set the height of div based on the heights of the first 3 divs on the fly without setting a fixed value for it. How can I achieve this?
You may try this. I've added jquery CDN. You can do this with raw javascript though.
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
/* Set the parent div's height */
$(function(){
$('.J1').height($('.each-button').outerHeight() * 3);
});
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" class="J1">
<!-- new class has been added -->
<div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href>Show more</a>
</div>
</body>
</html>
Here is my scenario. I have 3 separate json objects. I want to have all the 3 object values to be displayed in a single div. i.e (first values of imageList, headingList and priceList in first div and similarly second). I am trying to use ng-repeat like the one shown below. But it shows an error. Is there any other way I can achieve this?
<div ng-controller="bannerController">
<div ng-repeat="image in imageList, heading in headingList, price in priceList">
<div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
<h1>{{heading.title}}</h1>
<p>{{price.price}}</p>
</div>
</div>
Below are the index.html and script.js
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="script.js"></script>
<title>Angular Test</title>
</head>
<body>
<div ng-controller="bannerController">
<div ng-repeat="image in imageList">
<div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
<h1>{{heading.title}}</h1>
</div>
</div>
</div>
</body>
</html>
script.js
var myApp = angular.module('myApp', []);
myApp.controller('bannerController', function ($scope) {
$scope.imageList = [{
url: 'some Url 1'
}, {
url: 'some url 2'
}];
$scope.headingList = [{
title: 'Title',
subtitle: 'Subtitle'
}, {
title: 'Title',
subtitle: 'Subtitle'
}];
$scope.priceList = [{
price: 2
}, {
price: 3
}];
});
You can get values by using $index property of ng-repeat.
plunker link