如何在AngularJS中的网格中迭代多个下拉列表以获取所选值

时间:2018-05-17 06:53:58

标签: javascript angularjs angularjs-scope

如何在AngularJS for中迭代网格中的多个下拉列表 选择的值。下面是我的代码。附加了示例网格UI。我想 迭代每个行值并形成一个对象数组。我为每个下拉键和值对都有单独的模型。但不确定如何通过迭代读取它们

         <table class="filtertable" ng-show="FilterOptions">
            <thead>
                <th>And/Or</th>
                <th>Field</th>
                <th>Operator</th>
                <th>Value</th>
            </thead>

这里迭代并绑定下拉列表

            <tbody ng-repeat="m in FilterOptions">
                <tr>
                   Here we are biding the drop downs
                    <td><select ng-model="AndOrmodel" ng-show="m.AndOr" ng-options="option for option in m.AndOr"></select></td>
                    <td>  <select ng-model="Fieldsmodel" ng-options="o as o for o in m.Fields"></select></td>
                    <td>  <select ng-model="Operatorsmodel" ng-options="Operator.OperatorName for Operator in m.Operators track by Operator.OperatorId"></select></td>
                    <td>

                        <select ng-model="OperFieldsmodel" ng-if="Operatorsmodel.indexOf('Field') > -1" ng-options="o as o for o in m.Fields"></select>
                        <input type="text" ng-if="Operatorsmodel.indexOf('Field') == -1 || Operatorsmodel==undefined" ng-model="m.SearchValue" />

                    </td>
                    <td>
                        <p>
                            <a href="#" ng-click="Add($index)" title="Add">
                                <span class="glyphicon glyphicon-plus" 
                       style="color:green;"></span>
                            </a>
                        </p>
                    </td>
                    <td>
                        <a href="#" ng-click="Remove($index)" title="Remove 
                     this filter line">
                            <span class="glyphicon glyphicon-minus" 
                  style="color:red"></span>
                        </a>
                    </td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <p>
                            <a href="#" ng-click="Add()" title="Add">
                                <span class="glyphicon glyphicon-plus" style="color:green"></span>Add new clasue
                            </a>
                        </p>
                    </td>
                    <td>
                        <input type="button" value="Save" ng- 
                   click="SaveMasterSearch()" />
                    </td>
                </tr>
            </tfoot>
        </table>

0 个答案:

没有答案