I generated a list with ng-repeat, where each item has a count variable. In the listitems I have a link, I want to increment the count when I click it.
I don't have a clue to solve this in Angular-JS way.
Plunker
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script>
function increment() {
}
</script>
</head>
<body>
<div ng-init="items = [
{name:'fruit', count:4},
{name:'car', count:1},
{name:'dog', count:2}
]">
<ul>
<li ng-repeat="item in items">
<span>Count:</span>
<span>{{item.count}}</span>
<a onclick="increment();">Increment</a>
</li>
</ul>
</div>
</body>
With JQuery I would assign the span a unique id, using some counter variable, pass this id to increment, find the html object and update. But I'm curious about an Angular way to do it.
You can use ng-click to manipulate the data model for each row like this:
function ctrl($scope) {
$scope.increment = function(item){
item.count += 1;
}
}
<a ng-click="increment(item);">Increment</a>
Make sure you put the controller to wrap it like this <body ng-controller="ctrl">
DEMO
<a ng-click="item.count = item.count + 1">Increment</a>
http://plnkr.co/edit/jh4UIt?p=preview
Simply replace onclick with ng-click="item.count = item.count+1" and give the a href attribute.
<a ng-click="item.count = item.count+1" href="">Click</a>
This is a solution
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
</head>
<body>
<div ng-init="items = [
{name:'fruit', count:4},
{name:'car', count:1},
{name:'dog', count:2}
]">
<ul>
<li ng-repeat="item in items">
<span>Count:</span>
<span>{{item.count}}</span>
<a ng-click="item.count = item.count + 1">Increment</a>
</li>
</ul>
</div>
</body>
</html>
Related
I want to add a button
if array.length! = 0
and what I wrote does not work.
$scope.pages = 0;
if(array.length != 0) {
$scope.pages++;
}
and in AngularJS I made:
<div ng-repeat="page in pages">
<button ng-click="loadProducts(1)">{{ page }}</button>
</div>
I think in AngularJS can't after number, repeat buttons
I think you need this,
<div ng-repeat="i in loadProducts(pages) track by $index">
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.pages = 4;
$scope.loadProducts = function(num) {
return new Array(num);
}
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div ng-repeat="page in loadProducts(pages) track by $index">
<button>test{{ page }}</button>
</div>
</body>
</html>
If you want to create a list of buttons, do the following:
JS:
$scope.pages = 0;
$scope.pageArray=[];
if(array.length != 0) {
for(var i=0;i<array.length;i++){
$scope.pages++;
$scope.pageArray.push($scope.pages);
}
}
HTML:
<div ng-repeat="page in pageArray">
<button ng-click="loadProducts($index)">{{ page }}</button>
</div>
JS Fiddle:http://jsfiddle.net/5dybgrvv/
Or you can do it without adding content to your controller, like this :
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.number = 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="x in [].constructor(number) track by $index">
<button ng-click="loadProducts(1)">{{ $index }}</button>
</div>
</div>
I want to put some images into my background div.
I expected those 5 image files will be in the div with ".well" class, but they just were spread out of that div. So, here's my question.
How can I put those image files stably into .well div?
There's my code and result below:
<!doctype html>
<html ng-app="exampleApp">
<head>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet"></link>
<link href="bootstrap-theme.css" rel="stylesheet"></link>
<script>
angular.module("exampleApp", [])
.controller("exampleCtrl", function($scope){
$scope.data = [
{ movie:"Pandora", date:"2016-12-07", img:"pandora.gif" },
{ movie:"Lalaland", date:"2016-12-07", img:"lalaland.gif" },
{ movie:"Willyoubethere", date:"2016-12-14", img:"willYouBeThere.gif" },
{ movie:"brother", date:"2016-11-23", img:"brother.gif" },
{ movie:"Animal", date:"2016-11-16", img:"fantasticAnimalDictionary.gif" }
];
});
</script>
</head>
<body ng-controller="exampleCtrl">
<div class="container">
<div class="well">
<div class="col-md-2" ng-repeat="data in data">
<img ng-src={{data.img}} />
</div>
</div>
</div>
</body>
</html>
The result from my code
Add row class with well. like this
<div class="well row">
<div class="col-md-2" ng-repeat="data in data">
<img ng-src={{data.img}} />
</div>
</div>
row class are containers of columns.The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
Can someone advice how to do accordion that toggles with animation and if I click on 1st div, only the 1st panel will show?
http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview
<body ng-controller="Ctrl">
<div ng-repeat="item in items">
<div class="accordion" ng-click="show=show==true? false:true;">
{{item.id}}
</div>
<div class="repeated-item" ng-model="accordionContent" ng-show="show">
{{item.name}}
</div>
</div>
</body>
You don't need controller for this purpose, it can be handled directly using directives
Plunker Demo
Instead of re-inventing the wheel, use ui bootstrap's accordion directive. It comes with a lot of options for customization.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.isFirstOpen = true;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<div ng-app="ui.bootstrap.demo" ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="Another Static Header">
This content is straight in the template.
</uib-accordion-group>
</uib-accordion>
</div>
official plunker demo
Here is a solution for your problem in gennerally when you working with ng-repeat you could manipualte in your fucntions $index value of your arrray
[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview`][1]
//JS
$scope.toggle = function($index) {
$scope.index = $index;
};
//AND IN HTML SIMPLE TOGGLE CLASS
<div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >
How to find array size in AngularJS
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
$scope.names = [
{name:'Jani'} ,
{name:'raaj'}
];
});
</script>
</body>
</html>
here i need size of names array
Just use the length property of a JavaScript array like so:
$scope.names.length
Also, I don't see a starting <script> tag in your code.
If you want the length inside your view, do it like so:
{{ names.length }}
You can find the number of members in a Javascript array by using its length property:
var number = $scope.names.length;
Docs - Array.prototype.length
I have many items in a long listview. How can my users jump to (i.e. bookmark) to a specific item by visiting mypage.html#the_item_id ?
Actually, it can when I use inline view [Sample 1], but not when I use partial view [Sample 2]. Is there a bug in the latter case, or must I use any workaround?
Thanks in advance!
Sample 1: You can visit page.html#a100 to see item 100 ::
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
</body>
</html>
Sample 2: Can NOT visit page2.html#a100 to see item 100, WHY? ::
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
</body>
</html>
And this is the scroll_view.html needed by sample 2::
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
You have to use autoscroll attribute on ng-include.
Check the docs here: http://docs.angularjs.org/api/ng.directive:ngInclude
autoscroll(optional) – {string=} – Whether ngInclude should call $anchorScroll to scroll the viewport after the content is loaded.
If the attribute is not set, disable scrolling.
If the attribute is set without value, enable scrolling.
Otherwise enable scrolling only if the expression evaluates to truthy value.
So in your case:
<div ng-include="'scroll_view.html'" autoscroll></div>
I think html5Mode needs to be set to true, but I'm not certain. See if this works for you (it did for me, but I only tested on Chrome 23 loading the page using file:///...):
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="scroll_view.html">
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
</script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
</body>
</html>
app.js:
var app = angular.module('app', []).
config(function($locationProvider) {
$locationProvider.html5Mode(true);
})