javascript - AngularJS 更改集合项之间的 View

Question

所以，我在这里面临一个逻辑问题，我正在从一个对象迭代以创建 <options> 的列表在我的<select>

好吧，现在我需要切换对应所选选项的 View

<div>
    <select class="select"
        name="singleSelect"
        ng-model="$ctrl.currentViewOption">
        <option value="">Choose a option</option>
        <option ng-selected="$ctrl.selected(item)"
            value="{{item.token}}"
            ng-repeat="item in $ctrl.listOptions">{{'Option '}} {{ $index + 1 }}</option>
    </select>
    <code>selection={{$ctrl.currentViewOption}}</code>
    <hr/>
    <div class="animate-switch-container"
        ng-switch on="$ctrl.currentViewOption">
        <div class="animate-switch" ng-switch-when="item.token === correspondentView">view1</div>
        <div class="animate-switch" ng-switch-when="">view2</div>
        <div class="animate-switch" ng-switch-default>default</div>
    </div>
</div>

每个选项的结构是:

{ “ token ”:“56e6fe65712ed797f7014d40”， “状态”:3， “创建时间”:“某个日期”， "updatedAt": "某个日期", "content": ["这将包含渲染选项 View 的所有数据"] }

那么，我可以在 Controller 上做什么来根据每个项目切换 View ？对于每个 View ，我将根据 content 渲染数据该对象的属性

Answer 1

您为 ng-switch-when 指令设置的值是字符串，而不是表达式。请参阅https://docs.angularjs.org/api/ng/directive/ngSwitch

如果您希望能够根据 currentViewOption 的某些属性(例如内容)进行切换，则必须使用类似以下内容的内容:

 <div class="animate-switch-container"
    ng-switch on="$ctrl.currentViewOption.content">
    <div class="animate-switch" ng-switch-when="stringValueNecessaryToShowView1">view1</div>
    <div class="animate-switch" ng-switch-when="stringValueNecessaryToShowView2">view2</div>
    <div class="animate-switch" ng-switch-default>default</div>
</div>

在此示例中，当 currentViewOption.content == 'stringValueNecessaryToShowView1' 时，将显示 view1。