Question

嘿那里，

我几天来一直在努力解决这个问题，我试图创建一个角度指令模板表单，它接收数据源并创建一个包含该数据的可搜索表。截至目前，我可以单独为表格添加可搜索的列（例如search.BookId），并且它将对多列进行排序，但是我不知道列名将提前是什么所以我试图让它尽可能保持流畅。

问题在于我使用搜索。{{key}}它不会显示正确的数据，而是在检查元素时只是按字面显示＆＃34;搜索。{{key}}＆＃34;。我尝试过使用搜索[＆＃39; {{key}}＆＃39;]这会正确地获取密钥并将它们放到正确的位置但是我无法按照我想要的方式进行过滤表。

这是我的模板的样子：

            '<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，根据当前范围进行评估，因此您不需要其中的双重曲线，您只需执行ng-model="search[key]"。

Here's a plunk显示它有效。

如何动态创建搜索字段作为角度的标题

1 个答案: