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
Related
Currently new & working on a web app using AngularJS, using Nginx serv.
I want to select some precise values to put them in a html table.
I kept searching and never find an adequate solution.
Do you have an idea on how can I make this work?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('variables.json').success(function(data) {
$scope.variables = data;
});
});
</script>
<link rel="stylesheet" type="text/css" href="../app/css/style.css">
</head>
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<ul>
<li ng-repeat="var in variables">
{{var.b}}
{{var.a}}
</li>
</ul>
</body>
</html>
JSON File:
{
"a":6084.0,
"b":979
}
I just put an example of the JSON file. My purpose is to display for example just the b or a value.
You can read as (key,value) in $variables and display value.
<ul>
<li ng-repeat="(key,value) in variables">
{{key}}:{{value}}
</li>
</ul>
Demo link
https://plnkr.co/edit/nTUOvyMHcDRdtSzyecLw?p=preview
ng-repeat only works if the data in your json will be Array Since the data is the Object it will not find any element so it won't showing values .
change the Json as below:
[{
"a":6084.0,
"b":979
}]
The directive ngRepeat works with objects if the following syntax is used:
<div ng-repeat="(key, value) in myObj"> ... </div>
I am new to angular.js and I was trying my hands on it. Can anyone please tell me why this program is not running?
HTML code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link data-require="bootstrap#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script data-require="jquery#>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:name"></li>
</ul>
</div>
</body>
</html>
JS code:
// Code goes here
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'xx xx' city:'xx'},
{name:'yy yy' city:'yy'},
{name:'zz zz' city:'zz'}
];
}
demoApp.controller('SimpleController', SimpleController);
You have several errors in you sample:
The main problem is that you're using the Angular 1.x.x syntax while you have the Angular 2.x.x script included in your app. Change the script for the previous release of the framework.
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" data-semver="1.4.8"></script>
The customers object is not a valid JSON as separation commas between properties are missing. It should look like this:
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
You don't show anything using ng-repeat directive, you simply create several empty <li> tags, hence there's no content inside them. You need to display the variable that you iterate. If you want to show only the name property of the object, use simple dot syntax.
<li ng-repeat="cust in customers">{{cust.name}}</li>
Your input filed has ng-model attached, but you don't use the variable that is bound to it. You can refer to the variable with {{name}}.
Name: {{name}}<br/>
<input type="text" ng-model="name"/>
To see the big picture, here's the fixed sample.
Please refer to below code
HTML
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name: <br/>
<input type="text" ng-model="name"/>
<br/>
<ul>
<li ng-repeat="cust in customers| filter:name">{{cust}}</li>
</ul>
</div>
Angular
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
}
demoApp.controller('SimpleController', SimpleController);
Please refer
Problem
$scope.customers is not a valid object(missing commas between properties).
You have not displayed anything inside ng-repeat. Please use {{cust}}. Please refer ng-repeat.
The scripts inside your plunker are wrong.
Here is the fiddle demo.
js
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
html
<li ng-repeat="cust in customers | filter:name">
{{ cust.name }}
</li>
hope this will help you
I am new to angular js,i want loop an array from lower value to upper values in li tag.I am declaring an array with values in ng-init directive.I tried to use orderBy ,but it is not working.How to get it done ?
<html>
<head>
<title>My Page</title>
</head>
<body ng-app="">
<div ng-init="marks=[20,10,15,30,18,21,35]">
<ul>
<li ng-repeat="m in marks | orderBy:'marks'">{{m}}</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
To sort by the array elements themselves and not by their properties, you can use toString() to sort by their string values, or valueOf() if they are numeric values:
<li ng-repeat="m in marks | orderBy:'valueOf()'">{{m}}</li>
http://jsfiddle.net/3yynLkyh/3/
To sort in descending order, you can append a - before the function call:
<li ng-repeat="m in marks | orderBy:'-valueOf()'">{{m}}</li>
<html>
<head>
<title>My Page</title>
</head>
<body ng-app="">
<div ng-init="marks=[20,10,15,30,18,21,35]">
<ul>
<li ng-repeat="m in marks | orderBy:'+'">{{m}}</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Changes
ng-repeat="m in marks | orderBy:'+'" FOR ACCESSING
ng-repeat="m in marks | orderBy:'-'" FOR DECESSDING
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>
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);
})