javascript - 如何动态创建搜索字段作为 Angular 标题

Question

你好，

几天来我一直在努力解决这个问题，我正在尝试创建一个 Angular Directive(指令)模板表单，该表单接受数据源并将使用该数据创建一个可搜索的表格。截至目前，我能够为表格单独添加可搜索的列(例如 search.BookId)并且它将对多个列进行排序，但是我不知道列名会提前，所以我是尽量保持流畅。

问题是当我使用 search.{{key}} 时它不会显示正确的数据，而是在检查元素时只显示字面意思“search.{{key}}”。我试过使用 search['{{key}}'] ，它会正确获取 key 并将它们放在正确的位置，但是我无法按照我想要的方式在表上进行过滤。

这是我的模板的样子:

            '<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>',

和我的表数组:

$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"
                    }
                ];

我希望最终结果类似于 Angular 文档过滤版本(plnkr:https://plnkr.co/edit/?p=preview)。但是他们使用静态数据，而我使用动态数据。

我也尝试过的一些事情正在做:

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

但是在进行过滤时这似乎也不起作用

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

对我做错了什么有什么想法吗？

Answer 1

ng-model 中的值是一个 AngularJS expression它根据当前范围进行评估，因此您不需要其中的双 curl ，您只需执行 ng-model="search[key]"。

Here's a plunk显示它正在工作。