如何在 angular 中动态创建搜索字段作为 header

Question

你好，

几天来我一直在为这个问题苦苦挣扎，我正在尝试创建一个 angular 指令模板表单，该表单接受数据源并将创建一个可搜索的 table那个数据。截至目前，我能够为 table（例如 search.BookId）单独添加可搜索的列，并且它将对多个列进行排序，但是我不知道列名会在前面时间，所以我尽量让它保持流畅。

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

这是我的模板的样子：

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

和我的 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，因此您不需要其中的双卷曲，您可以只做 ng-model="search[key]".

Here's a plunk 正在运行。

如何在 angular 中动态创建搜索字段作为 header

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

html

javascript

angularjs

angularjs-directive