1

我有一个智能表，其中有一列包含基于一个对象的选择选项（下拉列表），并且它是基于不同 JSON 对象的选定选项。

因此，我使用 ng-repeat 重复所有选项值，并使用另一个对象 ng-selected 来标记该列中所有下拉列表的选定值。

每一行都是从 table tr 标签中的不同 ng-repeat 操作的。

我还希望 ng-change 在其值更改时触发函数调用。我在实现这一目标时遇到了问题。

这是一个不使用智能表（和任何其他复杂结构）的 plunker

柱塞

方法一：

<tr ng-repeat="objectOneRow in objectOne" >
   <td>
      <select ng-model="objectOneRow.selected" ng-change="optionChanged()">
         <option ng-repeat="optionValue in objectTwo" ng-selected="optionValue==objectOneRow.selected">{{optionValue}}</option>
      </select>
   </td>
</tr>

当我在 HTML 的选项标签中使用 ng-repeat 时，在它的选择标签中描述了 ng-model 和 ng-change 时，会插入一个空的未定义选项作为它的第一个值，但 ng-change 会在其值发生更改时被触发。

ng-selected 在上述方法中没有按预期工作。我面临一个空白选项问题（因为 ng-model 在操作开始时未定义 - StackOverflow 中的类似问题）

或者，当我使用 ng-options 时，不会触发 ng-change（但 ng-selected 工作正常），因为有两个不同的对象映射到 ng-model 和 ng-options 的重复部分。

方法二：

<tr ng-repeat="objectOneRow in objectOne" >
   <td>
      <select ng-model="objectOneRow.selected" ng-change="optionChanged()" ng-options="objectOneRow.selected as optionValue for optionValue in objectTwo track by optionValue">
      </select>
   </td>
</tr>

示例 JSON 数据：

objectTwo = [10,20,30,40,50,60,70,80,90,100];
objectOne = [
    {selected: 20},
    {selected: 10},
    {selected: 40},
    {selected: 10},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20},
    {selected: 20}
];

在方法 1 中，由于空白选项值，ng-selected 不起作用。

<option value="? string: ?"></option>

在方法 2 中，ng-change 不起作用，因为 ng-model 和 ng-options 映射到不同的对象。

注意：由于智能表对每个页面都使用从 0 到 page_max 的索引，因此我也无法手动操作选定的值。

4

0 回答 0