Can you explain the purpose of the equals sign in ngRepeat?

Can you explain the significance of the equals sign in the ng-repeat attribute value?

<li ng-repeat="person in people = (people | orderBy: firstname)">
    

rather than using:

<li ng-repeat="person in people | orderBy: firstname">
    

I couldn't find any examples illustrating this in the ngRepeat documentation.

Answer №1

This is a helpful tool for calculating the number of filtered objects.

function Users($scope) {
  $scope.users = [{
    username: 'john'
  }, {
    username: 'doe'
  }, {
    username: 'jane'
  }, {
    username: 'smith'
  }]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="Users">
  <ul>
    <li ng-repeat="user in filteredUsers = (users | filter: 'j')">{{user.username}}</li>
  </ul>
  Total filtered items: {{ filteredUsers.length }}
</div>

Answer №2

Hey @Krzysztof, using the "=" operator is not necessary to display the number of filtered objects. It can be achieved without it. Therefore, your assertion is incorrect.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble locating the componentwillunmountafterInteraction in the React Native deck swiper

I've been utilizing react native deckSwiper in my project, but I'm having trouble unmounting it from the screen due to an error that says "ReferenceError: Can't find variable componentWillUnmountAfterInteractions". The error stack trace is s ...

Instructions on developing a customized AngularJS email directive that utilizes @something.com as a placeholder and automatically adds it to the user's input

I need assistance with creating a custom email input directive that includes "something.com" as both a placeholder and part of the input. The directive should monitor the user's input until they type '@', at which point it should append what ...

Change the code from a for-loop to use the Array#map method

I have been working on a simple JavaScript function and attempting to convert the code from using a for-loop to Array#map. I'm sharing my code in the following fiddle as I am currently learning about array map: http://jsfiddle.net/newtdms2/. function ...

I am looking to amalgamate a pair of scripts into a single cohesive work

Currently, I am utilizing jQuery toggleClass to switch CSS styles. $ (".test").click(function () { $(this).toggleClass('active'); }); Whenever I click outside of the Bootstrap menu, the menu gets hidden. In addition to this functio ...

The Node.js API functions correctly when tested in Postman, but encounters issues when integrated with Angular.js

I'm currently working on developing a mean application. When I send a request through postman, the data is successfully created in mlab. However, when I try to post using $http, I encounter the following error: { "message": "Family validation fail ...

Could someone help me understand this JavaScript code where a function takes an object as a formal parameter?

Within a Vue component's methods, I came across the following code snippet defining a function: methods: { onEditorChange({ editor, html, text }) { console.log('editor change!', editor, html, text) this.content = html ...

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

IE9 not rendering inline styles properly when using AngularJS Directive

My directive is functioning well in Chrome, however in IE9 it displays '{{myappInitials.IconColor}' in the HTML: <tr ng-repeat="person in data.people"> <td class="text-left"> <div myapp-initials="person" ></div> ...

What is the best way to execute multiple controller functions for a single route?

I have a specific route set up for users to submit loan applications. What I want to achieve is to call different controller functions based on the amount of the loan that the user is applying for. app.use('/submitLoanRequest50kMore', mw1, mw2, ...

Event not tracking properly due to missing label in GA event firing

Seeking assistance with a project I'm currently engaged in. I have created an HTML5 video containing a playlist and encountering difficulties setting up multiple labels in GA to track each individual video play. While I found code online, adapting it ...

Troubleshooting a mysterious anomaly with a jQuery UI button

Would like to achieve something similar to this: http://jqueryui.com/demos/button/#icons When trying to replicate it, http://jsfiddle.net/p5PzU/1/ Why is the height so small? I expected a square shape but am getting a rectangle instead. What could be c ...

Exploring the intricacies of multidimensional array scopes in AngularJS

I have a JSON value that includes a list of countries and states. I want to split this value into two different scopes: $scope.countries and $scope.states. When the country is changed, the state should change based on the selected country. Sample JSON da ...

Expand the scope of the javascript in your web application to cater

I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

The EJS file is failing to display the stylesheet even though it is being pulled from the

Encountering a strange issue where the page routed to display additional information about a specific record from my database list on the homepage is not loading the stylesheets located in my partial/head, despite successfully passing the object informatio ...

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Welcome to the community of inquisitive individuals on Stack! I'm facing an interesting challenge while developing an Express app. Despite everything running smoothly with two routes, I've hit a roadblock with one route that seems to have empty i ...

Error: The navigation property is not defined - React Native

Utilizing Firebase in combination with react-native for user authentication. The main file is App.js which directs users to the Login component and utilizes two components for managing routes: Appnavigator.js to create a switchNavigator and DrawerNavigator ...

Discovering the specific value from a fixture file in Cypress

When I receive a JSON Response, how can I extract the "id" value based on a Username search? For instance, how can I retrieve the response with an "id" value of 1 when searching for the name "Leanne Graham"? It is important to note that the response valu ...