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

Question

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

到目前为止，我的代码看起来像这样

<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 设置一个基础对象来做到这一点。所以在你的 Controller 中你将拥有:-

 $scope.search = {}; 

在您看来:-

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

有了这个，你的动态 ng-model 将被分配给搜索基础对象，例如:- 如果 col.DatabaseColumnName 是 col1 那么 ngModel 将是 $范围.search.col1