Question

我的页面上有一个简单的下拉列表，允许用户在表格中查看实际或计划日期/时间之间切换（我使用控制器作为语法）：

<select ng-model="trip.viewType">
    <option value="actual">Actual</option>
    <option value="planned">Planned</option>
</select>

目前，我的表格硬编码为实际日期/时间，如下所示：

<table>
    <thead>
        <tr>
            <th>Timing</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Depart:</td>
            <td>{{ trip.departTimeActual }}</td>
        </tr>
        <!-- etc (up to ~80 conditional timings could be here!) -->
        <tr>
            <td>Arrive:</td>
            <td>{{ trip.arriveTimeActual }}</td>
        </tr>
    </tbody>
</table>

如果用户将下拉菜单更改为已计划，我希望能够切换到计划时间（例如{{ trip.departTimePlanned }}）。我已经对此做了一些研究，并找到了一些可能的解决方案，但它们似乎都不像是＃34; Angular方式＆＃34;接近这个问题，因为这意味着在视图模板中添加逻辑：

ng-show / ng-hide
ng-switch
三元表达，例如{{ condition ? ifTrue : ifFalse }}

有没有更好的方法来解决这个问题？

Answer 1

您可以为表绑定设置常规对象。

然后，当更改类型时，您可以将对象更改为指向当前类型数据。

查看：

    <tr>
        <td>Depart:</td>
        <td>{{ trip.viewTypeData.departTime }}</td>
    </tr>
    <!-- etc (up to ~80 conditional timings could be here!) -->
    <tr>
        <td>Arrive:</td>
        <td>{{ trip.viewTypeData.arriveTime }}</td>
    </tr>

控制器：

function TripController() {

  this.typesData = {
    "actual" : { departTime : 'd-t-a' , arriveTime : 'a-t-a' },
    "planned" : { departTime : 'd-t-p' , arriveTime : 'a-t-p' }
  }
  this.viewTypeData = {};

  this.viewType = "actual";

  this.typeChanged = typeChanged;
  this.typeChanged();

  function typeChanged(){
    this.viewTypeData = this.typesData[this.viewType];
  }
}

See deom on JSFiddle

多个条件表达式取决于下拉选择

1 个答案: