Encountering issues with AngularJS ng-repeat when attempting to iterate using Generators

Is it just me, or does ng-repeat in AngularJS refuse to work with generator functions? While it functions as expected within the controller, when used within HTML expressions, it appears that the generator has already been terminated. Can someone please shed some light on this Angular mystery for a newbie like me?

function Main($scope) {
  $scope.items = function*() {
    //console.log(1);
    yield 1;
    //console.log(2);
    yield 2;
    return null;
  }();
  //console.log($scope.items);
  //console.log($scope.items.next().value);
  //console.log($scope.items.next().value);
}


<div ng-app ng-controller="Main">
  <h2>{{items.next()}}</h2>
  <div ng-repeat="item in items">
    Hi {{item}}
  </div>
</div>

http://jsfiddle.net/4ouae9wm/1/

Answer №1

A generator function must be called with items() in order to return a generator that can be iterated. However, simply calling items as a function will not work in this scenario.

Iterables, including generators, are designed to be iterated using special handling in traditional JS loops. This typically involves checking the status of generator.next().done to determine when the loop should end. The for...of loop is specifically meant to handle iterating over iterables seamlessly.

Generators do not possess a length property and may not necessarily be finite. The AngularJS directive ngRepeat iterates over object keys or array-like objects using a traditional for loop based on the length property, without recognizing iterables or generators.

If the generator is finite, it must be converted to an array before being passed to ngRepeat.

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

Steps to installing npm on Ubuntu without root access:1. First, download

I have successfully installed node in a custom directory within my home folder called "local" following the instructions provided here: https://gist.github.com/isaacs/579814 Here is the output: Creating ./icu_config.gypi * Utilizing ICU in deps/icu-sma ...

Activate a jQuery plugin on elements that are dynamically generated

Here is the code snippet I am using: $(".address-geocomplete").geocomplete({ country: "US", details: ".details", detailsAttribute: "data-geo" }); When these elements are loaded with the document, everything works smoothly. However, there seem ...

What is the reason for the malfunction in the login dialog?

I'm having trouble implementing AJAX login functionality on my website. When I click the submit button, nothing seems to happen. Can someone take a look at the code and help me out? $(document).ready(function() { var user, pass; function login(us ...

AngularJS - Trouble loading directive

I'm facing some challenges with a custom directive I've created and it's not functioning as expected. Below is the code for my directive: angular .module('thermofluor') .directive('myCustomer', function() { return ...

Provide a parameter for a function's callback

I am attempting to utilize lodash's debounce function to delay the onChange event. See the code snippet below. import React, { useState, useEffect, useCallback } from "react"; import { TopBar } from "@shopify/polaris"; import { debounce } from "lodas ...

A guide on extracting data from an HTML table containing various input fields

I have a webpage with this table generated by a PHP script. What I need to do is extract the values from each of the 4 input fields and save them in separate JavaScript variables. Each button already has an onclick="fetchGrades(); trigger added. How can ...

Imagine a scenario where your json_encode function returns API data that is already in JSON format. What would

It has been a while since I last worked with JSON/PHP/AJAX, and now I am struggling to access the returned data. The AJAX function calls a PHP script that makes an API call returning JSON in $data. The JSON is then decoded using $newJSON = json_decode($da ...

Leveraging information beyond the socket.on function

I'm trying to work with socket data in a way that allows me to compare it outside of the initial socket.on function. I've attempted using global variables without success. One thought I had was grouping the data, but one is an io.emit and the oth ...

How can I create custom event listeners in AngularJS?

Is there a way to register custom event listeners in an AngularJS application? I am particularly interested in setting up Drag and Drop (DND) listeners. I want the ability for AngularJS to recalculate the business logic and update both the model and view ...

What is the best way to utilize ng-select group by for a boolean value while also specifying an order and label?

Here is some information: 0: {id: 1, name: "hhh", description: "hhh", isPopular: false,…} 1: {id: 2, name: "bbb", description: "bbb", isPopular: true,…} 2: {id: 3, name: "ccc", description: "ccc", isPopular: false,…} 3: {id: 4, name: "ddd", descript ...

Numerous routers available for enhancing functionality in an Ember application

Can an Ember app have multiple router.js files? By default, one router.js file will look like this: import Ember from 'ember'; import config from '../../config/environment'; var Router = Ember.Router.extend({ location: config.locat ...

Is it possible to apply a class without using ng-class?

Seeking a more efficient way to apply conditional classes to multiple elements on a validation form page, I am exploring options to assign one of five potential classes to each form input. While the traditional method involves manually specifying the class ...

Is the array empty once the functions have been executed?

app.post('/api/edit-profile', regularFunctions, async function (req, res) { let email = req.body.email let password_current = req.body.password_current connection.query('SELECT * FROM accounts WHERE id = ?', req.body.id, asy ...

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Is there a way to style radio buttons to look like normal buttons while maintaining their functionality and form validation? I have two radio buttons that need styling but should still behave like radio buttons. Additionally, I am utilizing Bootstrap for s ...

Using Google Chart API to create stacked bar charts with annotations using symbols

I am trying to annotate the bars in my stacked bar chart with currency symbols for profit and costs. While I have been able to successfully annotate the bars without currency symbols, I am facing difficulties in displaying them with the $ prefix. Can anyo ...

What could be the reason for my directive not properly interpolating the scope variable?

I attempted to create a directive that would swap out a CSS link with an inline style definition. Check out the functional version here. Now, I am hoping to achieve the same functionality using interpolation, so that I don't have to manually set the ...

Please ensure not to include any duplicate elements in the array

function findNeighbors(color_indices) { var neighbor_face = []; var temp_indexes = []; //initializing to specified length var len_color_indices = color_indices.length; for (var i = 0; i < len_color_indices; i++) { if (c ...

What steps can I take to resolve my password validation rule when confirming during sign-up?

Utilizing react-hook-form in combination with Material-UI for my sign-up form has been a challenge. I am currently working on implementing a second password field to confirm and validate that the user accurately entered their password in the initial field, ...

Can Mutation Observer be utilized in conjunction with a Three.js element in an A-Frame environment?

export class ColliderComponent { constructor() { this.observer = this.createMutationObserver(); this.registerAframeComponent(); } //Registers the AFRAME component. registerAframeComponent(){ const self = this; AFRAME.regi ...

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...