How about: "Naming AngularJS objects with the ng-model attribute"?

Currently working on a dynamic angular js application, aiming to integrate a textbox as a search filter for a table. Here's an overview of the progress so far:

Here is my current code snippet

<table>
                <thead>
                    <tr class="filterrow">
                        <td data-ng-repeat="col in items.Properties">
                            <input id="{{col.DatabaseColumnName}}" type="text" 
                               data-ng-model="search_{{col.DatabaseColumnName}}"/> 
<!-- My goal here is to assign ng-model dynamically based on Databasecolumnname property-->
                        </td>
                    </tr>
                    <tr>
                        <th data-ng-repeat="col in items.Properties">{{col.ColumnTitle}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="content in items2.Contents | filter: search_{{col.DatabaseColumnName}}: search_{{col.DatabaseColumnName}}">
                        <td data-ng-repeat="col in items.Properties">
                            <a href="#">{{content[col.Databasecolumnname ]}}</a>
                        </td>
                    </tr>
                </tbody>
            </table>

I attempted using $compile but faced challenges with its implementation. Any insights on a different approach would be greatly appreciated. Thank you!

EDIT: Plnkr - plnkr.co/edit/5LaRYE?p=preview

Answer №1

To implement dynamic ng-models, you can establish a base object for your ng-Models within your controller as shown below:

 $scope.currentSearch = {}; 

Then in your view, use the following code to link the input field with the corresponding key in the base object:

 <input ng-attr-id="{{col.DatabaseColumnName}}" type="text" 
                           data-ng-model="currentSearch[col.DatabaseColumnName]"/> 

By following this approach, the dynamic ng-model will be attached to the search base object. For example, if col.DatabaseColumnName is col1, then the ngModel would be $scope.currentSearch.col1.

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

What is the proper method for configuring distinct URL prefixes for production and development environments?

How can different URL prefixes be set up for the production and development environments? When hitting different domains during development and production, how is it possible to dynamically switch between two different hosts? This is my current approach. ...

Changing HTML elements dynamically within an ng-repeat using AngularJS directives

I have devised an angular directive where I execute an ng-repeat. The fundamental purpose of this directive is to interchange itself with a distinct directive that depends on a value forwarded into the original directive: <content-type-directive type=" ...

What methods can be used to identify the presence of a scrollbar in an

Currently, I am facing an issue with my SAPUI5 app. In the app, I have a table that extends beyond the screen. To allow users to navigate back to the top of the table, I have added a button. However, I only want this button to be displayed when the table g ...

Leveraging information stored in a PHP array with AJAX

Currently, I am implementing a change in the functionality of a website and looking for a solution that involves minimal rewriting. As of now, there is a file (myFile.php) that loads into a page using Wordpress. It utilizes a PHP array to display data. Th ...

Leverage array mapping functionality to generate React components within a separate component

Currently, I am retrieving data from an API and storing the results in an array. The issue arises when trying to map the array to a child component since it is initially empty. How can I ensure that the array mapping only executes when there is data in the ...

Preventing the DOMSubtreeModified event from triggering when adding an ID to a tag

Utilizing DOMSubtreeModified to track all changes in a div's DOM structure. var stoppedTyping=""; $(".jqte_editor").on("DOMSubtreeModified", function(e) { if (stoppedTyping) clearTimeout(stoppedTyping); stoppedTyping = setTimeout(function() ...

Gradually returning to the top with Vuetify's smooth scroll feature

Looking for a way to make the scrolling back to the top of the page smoother on my website. The button I currently have in place does the job, but it's not as smooth as I would like. Any suggestions on how to improve this? I've checked similar q ...

Tips on invoking a JSP and Servlet from JavaScript by passing in a parameter

Check out the code below for calling JavaScript functions: <td><input type="button" name="edit" value="Edit" onclick="editRecord(<%=rs.getString(1)%>);" ></td> <td><input type="button" name="delete" value="Delete" onclic ...

Monitoring the bandwidth usage of your meteor.js server?

After successfully measuring the bandwidth of a "basic node.js server" with this clever method, I'm intrigued about how to replicate the process on a meteor instance. Any insights on how to proceed? ...

The attribute 'constructor' is not found on the 'T' type

I'm currently working on a project using Next.js and TypeScript. I've come across an issue where TypeScript is giving me the error "Property 'constructor' does not exist on type 'T'" in my generic recursive function. Here&apo ...

i18next backend failing to load files

Hey there! Currently, I am implementing i18next within my Node JS Application. Below is the configuration code for i18next: const i18nextBackend = require('i18next-node-fs-backend'); i18n .use(i18nextBackend) .init({ fallbackLng: &apos ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

A guide on iterating through carousel elements using Vanilla JavaScript

I am currently extracting data from The Movie Database and I aim to showcase the retrieved information on my webpage using a carousel card with 3 slides. Here is a summary of my progress so far, html, <div class="details"><!--Movie deta ...

Validation in AngularJS - toggling between email format and input field

In my application, I have two fields - one for Email Switch which includes values of "Yes" and "No", and another field for users to enter their email address. I want to disable the email address text field when the Email Switch value is "No" and enable it ...

Having trouble with testing an Angular directive?

This is a snippet from my directive spec file for Angular 6. import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; import { TestBed, ComponentFixture, async } from '@angular/core/testing'; import { By } from ' ...

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

The left side of the page is anchored with text content while an engaging carousel occupies the right half

Looking to create a section on the website that remains fixed while a carousel scrolls vertically. Once you reach the final slide, scrolling will continue on the page rather than changing the carousel slide. Want it to function similarly to the Creative s ...

Retrieving over 300,000 rows from elasticsearch and saving them as a .csv document

Hi there, I am currently working on a website in nodejs that utilizes an Elasticsearch database. One of my indexes, 'bigData*', contains 366,844 rows with each row consisting of 25 items, each being a different string of varying sizes (with a max ...

Unexpected appearance of DOM elements

I've come across an unusual bug in a web application I've been developing that is reproducible in Chrome and Safari, but not in Firefox. To witness the bug, go to www.lastcalc.com and type a single uppercase letter. The letter will be immediatel ...

Ways to retrieve component information externally from export

As a newcomer to Vue, I've been experimenting with it before diving into our project, but I've encountered a problem. Typically, when we create an instance like "var app = new Vue ... etc.," we can access its data using app.data. But how do we a ...