Question

我正在创建一个动态角度js应用程序，其中我想使用文本框作为表格过滤器的搜索文本。这是我正在做的事情的预览：

Table with Search

截至目前，我的代码看起来像这样

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

我已经尝试过使用$ compile的方法，但是我无法实现它。方法中的任何想法？谢谢！

编辑：Plnkr - plnkr.co/edit/5LaRYE?p=preview

Answer 1

您可以通过为ng-Models设置基础对象来完成此操作。因此，在您的控制器中，您将拥有： -

 $scope.search = {};

并在您的视图中执行： -

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

这样，您的动态ng模型将被分配给搜索基础对象，例如： - 如果col.DatabaseColumnName为col1，那么ngModel将为$scope.search.col1

Angular JS对象作为ng-model属性名称

1 个答案: