`Can you explain how to specify the elements of an array within a form using AngularJS?`

Below is an array containing objects:

//Data source code
$scope.data = [
  {
   name: 'Lname',
   items: [{
      label: 'Lastname',
      type: 'text',
      model: 'lname',
      pattern: '/^[a-zA-Z]$/',
      required: true
   }]
 },
 {
  name: 'Fname',
  items: [{
    label: 'Firstname',
    type: 'text',
    model: 'fname',
    pattern: '/^[a-zA-Z]$/',
    required: true
  }]
 }];

This is how the form should be displayed in the view:

<form class="form-horizontal" name="editForm" novalidate>
  <div ng-repeat="elements in data">
    <div class="form-group-sm has-feedback" ng-repeat="el in elements.items">
      <label class="control-label">{{el.label}}</label>
      <input type="{{el.type}}"
             class="form-control" 
             placeholder="{el.label}"
             ng-model="selected.[el.model]" 
             ng-pattern="el.pattern" 
             ng-required="el.required"
      />

The issue currently faced is that only the label is being displayed correctly while other variables are not. What could be causing this problem?

Answer №1

It is essential to interpolate both the pattern and labels in order to make changes from:

placeholder="{el.label}"
ng-pattern="el.pattern"

To:

placeholder="{{el.label}}"
ng-pattern="{{el.pattern}}"

Check out this Fiddle for more details!

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

Issue encountered when attempting to set a default value in Material-UI Text Field while interacting with Redux state?

Struggling to assign a defaultValue property for a Text Field using data from Redux state, but the updates are not reflecting as expected. The value is passed down as a prop from the container component to the edit component like this: render() { const ...

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

Error message: The Node.js filtered LS command is missing a ")" after the argument list

I've been working on the learnyounode workshop and I'm stuck on a code issue. After running it through jslint, I received this feedback: Expected ')' to match '(' from line 6 but instead saw '{'. Oddly enough, line ...

Using $.ajax() to store data in the database

Is there a way to save dynamically generated elements from my application.js file into the database? Would the code be similar to this example?: $.ajax({ type: "POST", data: { title: 'oembed.title', thumbnail_url: 'oembed.thumbnail_ur ...

The Express server is set up with CORS enabled, however, it continues to encounter issues when attempting to make asynchronous HTTP requests from

We're currently experiencing an unusual issue and are seeking assistance to resolve it. Initially, our Express server is functioning well as an API when accessed from the same domain. However, we also need to utilize this API on our computers for tes ...

The issue with Jquery.Validate not functioning properly when trying to upload a file

I have integrated jQuery validation into my ASP.NET MVC project, and it is functioning correctly with textboxes. However, I am encountering an issue with file uploads. Below is the code snippet I am using: @model ffyazilim.Management.Model.Credential.Crea ...

Default value for the href property in NextJS Link is provided

Is there a default href value for Next/Link that can be used, similar to the way it is done in plain HTML like this: <a href='#' ></a> I attempted to do this with Link, but it resulted in the page reloading. Leaving it empty caused a ...

Can you explain the distinction between object allocation using the '=&' operator and the Object.create() method?

I have been delving deep into JavaScript object operations. My question revolves around the difference between const me = Object.create(person); and const me = person;. Both of these operations provide a similar output as they reference the object to a new ...

Achieving enlightenment with Satori in NextJS: Transforming SVG to PNG in a NodeJS Environment

I am currently exploring the capabilities of satori and integrating it into my next.js api routes. (I'm unable to utilize the vercel/og package). While I have successfully set everything up, I'm facing a challenge in converting the svg image gen ...

Error encountered in React: Unable to access property of splice as it is undefined

As I am still getting acquainted with React/JS, I am currently navigating through the process of developing a mobile website. My main goal is to incorporate a delete function without the use of a button. My approach involves utilizing a long-press event, a ...

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

Validating dates in TypeScript

Currently, I am studying date handling and have an object that contains both a start and end date. For example: Startdate = "2019-12-05" and Enddate = "2020-05-20" My goal is to establish a condition that first verifies the dates are not empty. After tha ...

Passing data between API tests in JavaScript

I'm encountering an issue where I need to create e2e api tests. The goal of the first test is to obtain a token for an unauthorized user, use that token in the method header for the second test to return a token for an authorized user, and then contin ...

Node.js, Angular.js, and socket.io powered chat app experiencing issues with cross-compatibility between different computers

I have a couple of questions. I followed a tutorial to create a basic chat application using angular js, node js, and socket.io. It functions flawlessly on the same computer in various browsers, but it doesn't seem to function when accessed from diffe ...

How can the onclick attribute be modified in an HTML document?

I am looking to update the data-pro-bar-percent attribute of a progress bar from 80 to 100 when a specific link is clicked. The change in attribute needs to be as follows: data-pro-bar-percent="80" --> data-pro-bar-percent="100" This is the current HT ...

webdriverio encountering difficulties selecting element for interaction

Trying to interact with a button using the webdriverio/mocha framework, the code snippet is as follows: describe ('Mytest', function () { beforeEach(function() { browser.url('/'); }) it ('should click', function () { ...

Is there a way to switch an input's appearance to resemble that of a label?

Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...

Innovative way to design a menu using HTML, CSS, and JavaScript that dynamically resizes to a specific width

I'm currently working on a website and I'm trying to create a menu with specific width of 700px. However, I'm unsure whether to tackle this using CSS, JavaScript, or a combination of both. Which approach would be the most straightforward for ...

Is it possible to dynamically assign trigger and target divs to bPopup?

On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX: <div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> We ...

Tips for setting restrictions on iview ui multiple select feature

How can I add a limit to iView UI's Multiple select? Here is the code snippet: <Select v-model="data.category" :multiple="true" filterable remote :remote-method="remoteMethod2" :loading="loading2"> <Option ...