iterative string ng-list that is specified in the text $scope variable

Is there a way to set up a dynamic ng-repeat in $scope variable that looks like this:

$scope.radioOptions =[{value:1,name:'radio1'},{value:2,name:'radio2'}];
$scope.item = {
    model: "radio", 
    radioOptions:'opt in radioOptions',
    optValue:'value',
    optLabel:'name'
}

and then utilize it in the html code:

<div class="radio radio-info radio-inline" ng-repeat="item.radioOptions">
      <input type="radio" id="{{$index}}" ng-value="item.optValue" name="{{item.model}}">
       <label for="{{$index}}">{{item.optLabel }}</label>
 </div>

This is producing an error message:

Error: [ngRepeat:iexp] http://errors.angularjs.org/1.4.8/ngRepeat/iexp?p0=item.radioOptions

How can I properly create a dynamic ng-repeat with these specifications?

Answer №1

Implement this code snippet to dynamically create radio buttons:

  $scope.radioOptions =[{value:1,name:'radio1'},{value:2,name:'radio2'}];

  $scope.item = {
      model: "radio", 
      radioOptions:$scope.radioOptions,
      optValue:'value',
      optLabel:'name'
  }

Then, in the HTML file:

<div class="radio radio-info radio-inline" ng-repeat="option in item.radioOptions">
     <input type="radio" id="{{$index}}" ng-value="option[item.optValue]" name="{{option[item.model]}}">
     <label for="{{$index}}">{{option[item.optLabel]}}</label>
</div>

Answer №2

I came up with a solution that involves using a function which takes the name of an array as input and returns the array collection:

$scope.radioOptions =[{value:1,name:'radio1'},{value:2,name:'radio2'}];
$scope.item = {
    model: "radio", 
    radioOptions:'radioOptions',
    optValue:'value',
    optLabel:'name'
}

// retrieve array collection by its name
$scope.getCollection = function (name) {
        return $scope[name];
    };

Then, update the HTML code to look like this:

<div class="radio radio-info radio-inline" ng-repeat="opt in getCollection(item.radioOptions)">
      <input  type="radio" id="{{$index}}" ng-value="opt[item.optValue]" name="{{item.model}}">
      <label for="{{$index}}">{{opt[item.optLabel] }}</label>
</div>

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

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

A unique approach to handling ngdisabled for fields that are required only

Starting off with a requirement to disable the submit button when a required field is left empty. <form name="form"> <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/> ...

Show information according to the user's input

I am working on a page layout that includes two columns: Side and Middle. Within the side column, there is a form containing a date input and a button labeled "View Summary Report." Upon selecting a date and clicking the button, the goal is to retrieve d ...

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

Leveraging jQuery functions with dynamically generated DOM elements in JavaScript

On my website, I have a button that dynamically generates a dropdown menu, a textfield, and two buttons when clicked. The purpose of the textfield is to track the quantity selected, while the two buttons allow users to increase or decrease the value by 1. ...

"Exploring ways to create and save content in a different root folder within a nodejs project using my

In the process of developing my npm module, I am faced with the task of creating or writing a file in either the root directory or a specific folder within the nodejs project that will be utilizing my module. This includes users who will be implementing my ...

Creating a parameterized default route in Angular 2

These are the routes I've set up: import {RouteDefinition} from '@angular/router-deprecated'; import {HomeComponent} from './home/home.component'; import {TodolistComponent} from './todolist/todolist.component'; import { ...

Display JavaScript and CSS code within an Angular application

I am working on an Angular 1.x application (using ES5) where I need to display formatted CSS and JS code for the user to copy and paste into their own HTML file. The code should include proper indentations, line-breaks, etc. Here is a sample of the code: ...

Is the Three.JS camera update causing issues with the shader?

Attempting to replicate the Bubble shader from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Bubble.html, but encountering issues due to outdated code. The example should refract whatever is behind it, like this: https://i.sstatic ...

Enhancing Bootstrap Slider Range with jQuery/Javascript

Currently, I have incorporated the Bootstrap slider into a webpage that features two sliders on a single page. The range of the second slider depends on the value of the first one. It is crucial for me to be able to update the range of the second slider af ...

Using select2, items can be automatically selected for an ajax call

Is it possible to configure a select2 control to automatically select an item when the ajax response contains extra data? I am looking to set up my controller to mark an item as an exact match in the JsonResult and have the select2 control automatically s ...

Utilize jQuery AJAX function to fetch a PDF document from a PHP file

My PHP file, example_061.php, successfully creates a PDF that works fine when returned. Now, I am attempting to call this file using jQuery AJAX to display it on my screen. Here is my code: $("#proba").click(function() { // Perform ajax after checking ...

Changes made in React are not reflected in the DOM

import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./index.css"; class App extends Component { constructor(props) { super(props); this.state = { text: "", listItem: [] } this.onChangeInpu ...

dividing an HTML string into individual variables using JavaScript

How can a string be split in pure JavaScript (without using JQuery/dojo/etc) in the most efficient and straightforward way? For example: var tempString = '<span id="35287845" class="smallIcon" title="time clock" style="color:blue;font-size:14px;" ...

Is it possible to ban a user who is not a member of the current guild using Discord.js library?

Currently, I am developing a bot with moderation capabilities and have encountered a challenge in finding a method to ban a user other than using member.ban(). While this function works effectively for users who are currently in the guild, it fails to wo ...

`Unresolved: AngularJS preselection quandary with dropdown menu`

I am encountering an issue with the select box that is pre-selected, where the database field value of selected subjects is saved in this particular format: ["12","3","37"] The PHP code reads the value from the database: $data['classSubject']=j ...

"An issue has been detected in the Entry module, which cannot be located in

My journey into JavaScript is just beginning, as I diligently follow a well-structured node tutorial available on Github. Despite my best efforts in all the modules, I keep encountering an error message whenever I run yarn dev:wds. ERROR in Entry modu ...

Spinning a rectangular grid with JavaScript

I am currently developing my own version of Tetris. My main focus at the moment is creating a function that can rotate a 2D variable array by 90 degrees (or -90). For instance, if we have an array like: "-T-", "TTT" The expected outpu ...

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

Currently, I am facing an issue while attempting to integrate Semantic-UI-Vue into my Vue project. Upon trying to execute Vue.use(SuiVue), the following error message is displayed: Argument of type 'typeof import("semantic-ui-vue")' is not ass ...

What are the implications of dynamically setting or changing event handlers in web development?

Looking to streamline the process of replacing standard confirm() boxes with Bootstrap modals for saving and deleting on a page. Each operation has its own button (referred to as the action button) which triggers the corresponding modal. Upon clicking the ...