Angular JS object as ng-model attribute name

Question

I'm creating a dynamic angular js application wherein I want to use a textbox as a searchtext for the filter of a table. Here's a preview on what I am doing:

Table with Search

As of now, my code looks like this

<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}}"/> 
<!-- Above Here I want to dynamically assign the ng-model 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 already tried the approach of using $compile but I wasn't able to implement it. Any ideas in an approach? Thanks!

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

It's difficult to help with this when you are giving us so little information, could you please set a jsFiddle or a plnkr with your complete code? Could you please share an snipped with the structure of 'items'? Thanks! — Josep
– Josep, Commented Sep 8, 2014 at 1:18
I've already shared my plnkr as a comment in PSL's comment. It was already solved. Thanks anyway! — Ricalyn Haboc
– Ricalyn Haboc, Commented Sep 8, 2014 at 12:33

PSL · Accepted Answer · 2014-09-08 01:28:43Z

2

You can do this by setting a base object for your ng-Models. So in your controller you will have:-

 $scope.search = {};

and in your view do:-

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

With this your dynamic ng-model will be assigned to the search base object, ex:- if col.DatabaseColumnName is col1 then ngModel would be $scope.search.col1

answered Sep 8, 2014 at 1:28

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ricalyn Haboc Over a year ago

Thank you so much for this! I'm enlightened! :) How about the filtering part? Can I do it as: <tr data-ng-repeat="content in items2.Contents | filter: {{col.DatabaseColumnName}}: search[col.DatabaseColumnName]"> ?

PSL Over a year ago

You are welcome.. :). filter probably might be tricky (i am not sure about your data structure) can you prepare a demo in plunker with a sample data structure...?

PSL Over a year ago

@HannahRichards You just have to do: | filter: filters If my understanding of your reqmnt is correct. ALso you had some issues with your plunker. See the demo here plnkr.co/edit/nCPxFR?p=preview Try filtering entering the Id textbox

Collectives™ on Stack Overflow

Angular JS object as ng-model attribute name

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related