I'm using ngInfiniteScroll in my project to load large data into the UI.
Here is my HTML,
<div infinite-scroll='nextPage()'>
<div ng-repeat="app in applications">{{app.name}}</div>
</div>
In my controller,
$scope.nextPage = function(){
console.log("nextPage");
$scope.page++;
.....
}
nextPage() method is called only once. It's not triggering after the first time.
What am I doing wrong ?
Try using this example
html
<div ng-app='myApp' ng-controller='DemoController'>
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
</div>
script
<script>
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
</script>
Related
I'm trying to assign a scope variable's value to an ng-style directive but the name is not parsing.
What am I doing wrong? When you press the TEST button it should turn the text to RED but the scope variable is not parsing as it's name is dynamic. I've tried multiple different syntax which all didn't work.
Here is the html:
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
<div ng-style="{{'DynamicVariable-'+$index}}">
{{someone.name}}
</div>
</div>
</div>
controller code
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.someone = {
name: 'John'
};
$scope.items=[1,2,3,4,5,6,7,8,9];
$scope.mainId = 1;
$scope.Test=function(){
for(var i=0;i<$scope.items.length;i++){
$scope["DynamicVariable-"+i]={color:'red'};
}
console.log($scope);
};
}]);
js fiddle that doesn't work:
http://jsfiddle.net/avboivin/0qov365b/4/
It has a problem with '-', try to remove it
html:
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
<div ng-style="{{'DynamicVariable'+$index}}">
{{ someone.name }}
</div>
</div>
</div>
controller:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.someone = {
name: 'John'
};
$scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.mainId = 1;
$scope.Test = function () {
for (var i = 0; i < $scope.items.length; i++) {
$scope["DynamicVariable" + i] = { color: 'red' };
}
console.log($scope);
};
}]);
fork
I'm having an array values like [0,1,5,10].
I need the output to be like this
0
1
b
b
b
5
b
b
b
b
10
For the empty values inside the array, I want to print as b. How can i do it with the ng-repeat and I dont want the static coding it want it to be dynamic.
my code is like this :
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in q">{{i}}</div>
</div>
And one more thing id don't want to create a new array using array.push() method.
Please help me on this, thanks in advance.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
$scope.temp = function(){
var answer = [];
for(var i = $scope.q[0]; i <= $scope.q[$scope.q.length-1]; i++)
answer.push($scope.q.indexOf(i) == -1 ? 'b' : i);
return answer;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in temp() track by $index">{{i}}</div>
</div>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0, 1, 5, 10];
$scope.getNumber = function(num) {
if (num > 0) return new Array(num);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in q">
<div ng-repeat="j in getNumber(q[$index] - q[$index-1]-1) track by $index">b</div>
{{i}}
</div>
</div>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
$scope.empties = function(index) {
return index === 0 ? [] : new Array($scope.q[index] - $scope.q[index - 1] - 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat = "i in q">
<div ng-repeat = "empty in empties($index) track by $index">b</div>
<div>{{i}}</div>
</div>
</div>
</div>
I am binding numbers to a dropdown.
When page loads, the default number selected is 3. It should be 1.
Also, when I select other options like 2 & 1 in the dropdown, there are not selected. It just remains 3. Why is this happening.
Issue:
The problem is with the ng-class. If I remove the ng-class expression for Next, it works fine. But I want the Next & Last to be disabled, when user selects the last page.
I guess, $scope.LastPageNumber is assigned in a promise and hence the value doesnt stay. That's the reason for the bug.Isn't it. But then how to fix this.
HTML:
<ul class="pagination custom-pagination">
<li ng-class="{disabled: SelectedPage<=1}">First</li>
<li ng-class="{disabled: SelectedPage<=1}">Prev</li>
<li>
<select ng-model="SelectedPage" ng-options="Number for Number in PageNumbers">
</select>
</li>
<li ng-class="{disabled: SelectedPage=LastPageNumber}">Next</li>
<li>Last</li>
</ul>
JS:
$scope.SelectedPage;
$scope.LastPageNumber;
$scope.PageNumbers = [];
$scope.UserReport = [];
GetReport();
console.log($scope.SelectedPage); //print undefined
console.log($scope.LastPageNumber); //print undefined
function GetReport() {
var promise = Factory.GetReport();
promise.then(function (success) {
if (success.data != null && success.data != '') {
$scope.UserReport = JSON.parse(success.data);
BindPageNumbers(9);
}
else {
$scope.UserResponsesReport = [];
}
},
function (error) {
console.log(error);
});
}
function BindPageNumbers(totalRows) {
$scope.LastPageNumber = Math.ceil((totalRows / 3));
for (var i = 1; i <= $scope.LastPageNumber ; i++) {
$scope.PageNumbers.push(i);
}
$scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1
console.log($scope.PageNumbers[0]); //prints 1
}
You can do it like this:
var app = angular.module('App',[]);
app.controller("ctrl",function($scope){
$scope.SelectedPage;
$scope.LastPageNumber;
$scope.PageNumbers = [];
BindPageNumbers(9);
function BindPageNumbers(totalRows) {
$scope.LastPageNumber = Math.ceil((totalRows / 3));
for (var i = 1; i <= $scope.LastPageNumber ; i++) {
$scope.PageNumbers.push(i);
}
$scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1
}
});
And in HTML:
<body ng-app="App" ng-controller="ctrl">
<select ng-model="SelectedPage" ng-options="number for number in PageNumbers"></select>
Here is the plunker
You should use the ng-options directive:
HTML:
<div ng-app="app">
<div ng-controller="mainController">
<select ng-model="SelectedPage" ng-options="PageNumber for PageNumber in PageNumbers">
</select>
{{SelectedPage}}
</div>
</div>
JS:
angular.module('app', [])
.controller('mainController', function($scope) {
$scope.PageNumbers = [1, 2, 3];
$scope.SelectedPage = $scope.PageNumbers[0];
});
Working fiddle here: http://jsfiddle.net/ben1729/daL8r5b9/1/
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected" ng-options="number for number in PageNumbers">
<option>{{number}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.PageNumbers = [1,2,3];
$scope.selected=$scope.PageNumbers[0];
});
</script>
</body>
I just started up learning AngularJS and I have no idea how to solve this problem. For example I have 4 records (car, plane, ship, train) and I only want to show 2 randomly in ng-repeat.
Examples:
1.st. plane, ship
2.nd. car, train
3.rd. train, plane
So how would syntax look like ?
JS:
app.controller('WorkCtrl', function($scope, $http) {
$http.get('work.json').success(function(work) {
$scope.work = work;
});
});
HTML:
<div class="work" ng-controller="WorkCtrl">
<ul class="grid">
<li ng-repeat="work in work">
<a href="#{{ work.link }}" target="blank_">
<div class="background"></div>
<h3 class="name">#{{ work.name }}</h3>
<p class="description">#{{ work.description }}</p>
<img ng-src="#{{ work.image_path }}">
</a>
</li>
</ul>
</div>
I created something like this:
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function($scope){
$scope.records = ['plane', 'train', 'car', 'submarine'];
}]);
app.filter('randomSelection', function(){
return function(inputArray, numItemsToReturn){
// assuming you pass an array, not doing checking here
if(!inputArray)
return inputArray;
var numItems = inputArray.length;
var min = 0;
var max = numItems-1;
var random = Math.floor(Math.random() * (max - min + 1)) + min;
while (inputArray.length > numItemsToReturn){
inputArray.splice(random, 1);
}
return inputArray;
};
});
HTML:
<div ng-repeat="record in records | randomSelection : 2">
{{record}}
</div>
Seems to work, no infdigest loop. You may want to add another condition in the while loop to break out so as to avoid an infinite loop.
http://embed.plnkr.co/mJ5Q7n24uLnELSNPUB9z/script.js
<div ng-repeat="w in work = (work|orderBy:randomize).slice(0, 2)">
$scope.randomize = function () {
return 0.5 - Math.random();
};
Demo: http://jsfiddle.net/hmx2zqex/
I'm testing the following code in angular and it's not working. I'm very new to Angular and I've been unable to figure this out. All I'm trying to do is show a particular element based on a step number when next/back buttons are clicked.
<div ng-app ng-controller="Ctrl">
<div ng-switch on="selection" >
<div ng-switch-when="2" step-number="2">Settings Div</div>
<span ng-switch-when="1" step-number="1">Home Span</span>
<span ng-switch-default step-number="3">default</span>
<button ng-click="back(step-number)">back</button>
<button ng-click="forward(step-number)">forward</button>
</div>
</div>
function Ctrl($scope) {
$scope.items = ['1', '2', '3'];
$scope.forward = function($selected) { $scope.selection = $scope.items[$selected - 1]; };
$scope.back = function($selected) { $scope.selection = $scope.items[$selected - 1]; };
}
I think I would refactor what you are doing to the following:
Demo: http://plnkr.co/edit/b7mQ5ssSqECDUhvN0S2b?p=preview (click back first).
app.controller('Ctrl', function($scope) {
$scope.name = 'World';
$scope.selection = 2;
$scope.items = ['div 1', 'div 2', 'div 3'];
$scope.forward = function() {
if ($scope.selection==$scope.items.length-1) $scope.selection=0;
else $scope.selection++;
};
$scope.back = function() {
if ($scope.selection==0) $scope.selection = $scope.items.length-1;
else $scope.selection --;
};
});
<body ng-controller="Ctrl">
<div >
<div>
<div>{{items[selection]}}</div>
<button ng-click="back()">back</button>
<button ng-click="forward()">forward</button>
</div>
</div>
</body>
I'm not sure what you are trying to do with step-number, but here is a way to make your buttons work between the values of 1 and 3 inclusive:
<div ng-switch on="selection">
<div ng-switch-when="2">Settings Div</div>
<span ng-switch-when="1">Home Span</span>
<span ng-switch-default step-number="3">default</span>
<button ng-click="back()">back</button>
<button ng-click="forward()">forward</button>
</div>
function MyCtrl($scope) {
$scope.selection = 3;
$scope.forward = function () {
$scope.selection += 1;
if ($scope.selection > 3) $scope.selection = 3;
console.log($scope.selection);
};
$scope.back = function () {
$scope.selection -= 1;
if ($scope.selection < 1) $scope.selection = 1;
console.log($scope.selection);
};
}
fiddle