How to dynamically create a search field as a header in angular

Question

Hey there,

I've been struggling with this problem for a few days, I'm trying to create an angular directive template form that takes in a data source and will create a searchable table with that data. As of now, I'm able to individually add searchable columns for the table (for example search.BookId) and it will sort on multiple columns, however I don't know what the column names will be ahead of time so I'm trying to keep it as fluid as possible.

The problem is when I use search.{{key}} it will not show the correct data and instead when inspecting the element just show literally "search.{{key}}". I have tried using search['{{key}}'] which will get the keys correctly and put them into the right spots but then I can't do the filtering the way I want on the table.

Here's what my template looks like:

            '<table class="table table-striped table-bordered">' +
            '<thead>' +
            '<tr>' +
            //'<th><input type="text" ng-model="search.BookID"></input></th>' + 

            '<th>' +
            '' +
            '</th>' +

                '<th ng-repeat="(key, value) in tableArray[0]">' +
                    '<input type="text" placeholder="{{key}}" ng-model="search.{{key}}"></input>' +
            '</th>' +

            '</tr>' +
            '</thead>' +
            '<tbody>' +
            '<tr ng-repeat="tr in tableArray | filter:search:strict">' +
            '<td ng-repeat="item in tr">{{item}}</td>' +
            '</tr>' +
            '</tbody>' +
            '</table>',

and my table array:

$scope.tableArray = [
                    {
                        "BookID": "1",
                        "BookName": "Computer Architecture",
                        "Category": "Computers",
                        "Price": "125.60"
                    },
                    {
                        "BookID": "2",
                        "BookName": "Asp.Net 4 Blue Book",
                        "Category": "Programming",
                        "Price": "56.00"
                    },
                    {
                        "BookID": "3",
                        "BookName": "Popular Science",
                        "Category": "Science",
                        "Price": "210.40"
                    },
                    {
                        "BookID": "4",
                        "BookName": "Indian Studies",
                        "Category": "History",
                        "Price": "132.68"
                    },
                    {
                        "BookID": "5",
                        "BookName": "Derivatives and You",
                        "Category": "Math",
                        "Price": "206.73"
                    },
                    {
                        "BookID": "6",
                        "BookName": "The art of the Greeks",
                        "Category": "Social Studies",
                        "Price": "10.30"
                    },
                    {
                        "BookID": "7",
                        "BookName": "Chemistry 101",
                        "Category": "Chemistry",
                        "Price": "140.40"
                    }
                ];

I'd like the end result be similar to the Angular documentations filtering version (plnkr: https://plnkr.co/edit/?p=preview ). But they use static data whereas i'm using dynamic data.

Some things I have also tried is doing:

'<table>' + 
                '    <thead>' + 
                '       <th ng-repeat="(key, value) in obj[0]"><input type="text" ng-model="search[\'{{key}}\']"></input></th>' +
                '    </thead>' + 
                '</table>' +

But that didn't seem to work either when doing the filter

 '<tr ng-repeat="tr in tableArray | filter:search:strict">' +

Any ideas of what I'm doing wrong?

Answer 1

The value in ng-model is an AngularJS expression that gets evaluated against the current scope, so you don't need the double-curlies inside of it, you can just do ng-model="search[key]" .

Here's a plunk showing it working.