What does equals in ngRepeat do? - javascript

What does the equals in the ng-repeat attribute value mean?
<li ng-repeat="person in people = (people | orderBy: firstname)">
instead of doing:
<li ng-repeat="person in people | orderBy: firstname">
I can't see any examples explaining its use in the documentation for ngRepeat.

It is usefull for count how many objects were filtered, eg.
function People($scope) {
$scope.people = [{
firstname: 'a'
}, {
firstname: 'c'
}, {
firstname: 'b'
}, {
firstname: 'c'
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="People">
<ul>
<li ng-repeat="person in filteredPeople = (people | filter: 'c')">{{person.firstname}}</li>
</ul>
Total filtered: {{ filteredPeople.length }}
</div>

#Krzysztof - There is no requirement of "=" operator usage to show number of objects filtered. It can be done without it. So, you are completely wrong.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in people | orderBy: 'age'">{{x.name}},{{x.age}}</p>
<p>Total Filtered: {{people.length}}</p>
<script>
//Module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope,$timeout){
$scope.people = [{name:"Peter",age:15},{name:"Julie",age:28},{name:"Roger",age:17}];
});
</script>
</body>
</html>

Related

How Hide data before searching and display when searching with Anguler.js

**So, I have this table that displays users taken from a server in angularjs. Here is the users object:
:**
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
Here html :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
You can hide list until user enters something in input like
<ul ng-if="test">
...
</ul>

shorten ng-repeat variable with limitTo

In my DB I have Datastructure like this
"Projects":[{
"Year2016":[{"Name": "Project1"},{"Name": "Project2"}],
"Year2017":[{"Name": "Project1"},{"Name": "Project2"}]
}]
with ng-repeat i go
ng-repeat="year in Projects"
<b>{{year | limitTo:4:6}}</b>
instead of 2016 i get the whole {"Year2016":.....}
if i put the query response in the code as a string it works as suspected but
for some reason the limitTo is not working on the new ng-repeat "variable"
Is it possible at all?
you should use a (key, value) syntax ng-repeat to loop through json object array with the keys.
refer the below example:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = {
"Projects": [{
"Year2016": [{
"Name": "Project1"
}, {
"Name": "Project2"
}],
"Year2017": [{
"Name": "Project1"
}, {
"Name": "Project2"
}]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="project in data.Projects">
<div ng-repeat="(key, value) in project">
<b>{{key | limitTo:4:4}}</b>
<div ng-repeat="item in value">
<span>{{item.Name}}</span>
</div>
</div>
</div>
</div>
last field id for starting index so your ng repeat should be
ng-repeat="year in Projects"
<b>{{year | limitTo:4:4}}</b>

Cannot get angular.isString to work with ng-repeat

I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/
Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>
The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview
Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});

angularjs: controllers with routeproviders

I am trying to load two controllers dynamically using routeproviders in angularjs. But it only returns a blank page instead of showing the default page. What is the error I have done? The code is given below.
Index.html
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<div ng-view=""></div>
</body>
<script>
var demoController = angular.module('demoController',[]);
demoController.config = function ($routeProvider){
$routeProvider
.when('/customers',{
controller:'sampleController',
templateUrl:'template/customers.html'
})
.when('/location',{
controller:'nextController',
templateUrl:'template/location.html'
})
.otherwise({redirect:'/customers'});
});
var dumpControllers={};
dumpControllers.sampleController=function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
};
dumpControllers.nextController=function ($scope){
$scope.location=[{city:'Chennai'},{city:'Bangalore'},{city:'Mumbai'}];
}
demoController.controller(dumpControllers);
</script>
location.html
<ul>
<li ng-repeat="loc in location | orderBy: 'city'">{{ loc.city }}</li>
</ul>
customers.html
<input type="text" ng-model="searchName">
<ul>
<li ng-repeat="cust in customers | filter:searchName | orderBy:'country'">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
Can help me with this working? Thanks!!!
Put this in your head after you load angular:
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
and inject the module:
var demoController = angular.module('demoController',['ngRoute']);
and another problem:
.when('/location',{
controller:'nextController',
templateUrl:'template/location.html'
})
.otherwise({redirect:'/customers'});
};//Removed parenthesis

Add template conditionally in Angular

I have some data:
$scope.posts = [
{ 'name' : 'post1', 'templateName' : 'template1.html' },
{ 'name' : 'post2', 'templateName' : 'template2.html' }
]
...and I have two templates:
<script type="text/ng-template" id="template1.html">
<p><span>{{post.name}}</p></li>
</script>
<script type="text/ng-template" id="template2.html">
<p>{{post.name}}</p>
</script>
They are to be inserted into a list that is backed by $scope.posts, which in turn is listed with:
<li ng-repeat="post in posts"></li>
How do I iterate over $scope.posts and insert the right template, based on 'templateName', but also populate it with post.name?
I would use ngIf for something like this, you can also use ngSwitch
<p ng-if="post.templateName == myTemplate"></p>
<p ng-if="post.templateName == myOtherTemplate"></p>
So I ended up doing the following:
<li ng-repeat="post in posts">
<ng-include src="post.template"></ng-include>
</li>
Just to be safe:
<li ng-repeat="post in posts">
<div ng-include="post.templateName"></div>
</li>
In case some Browsers(IE) don't like non standard tags.

Categories