Question

我是新人，正在尝试使用AngularJS。

话虽这么说，我不确定如何将值绑定到ng-switch并通过更改“activeView”来动态地在视图之间切换。变量值。

旁注：在这样的视图之间切换是一个好习惯吗？视图是显示相同数据的不同方式，因此它几乎是相同的上下文，我没有看到为两个视图创建不同页面的原因。哦，视图内容实际上是指令组件。

html：

<body ng-controller="SomeController as vm">
    <div ng-switch="{{vm.activeView}}">
        <div ng-switch-when="someView">
            some directive component
        </div>

        <div ng-switch-when="anotherView">
            another directive component
        </div>

        <div ng-switch-default>
            nothing to show
        </div>
    </div>
</body>

控制器：

(function () {
'use strict';

angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() {
    var vm = this;

    vm.activeView = '';

    function setViewType(viewType) {
        vm.viewTypes = viewType;
    }

    setViewType('anotherView');
}
})();

所以发生的是默认开关是可见的，调用setViewType之后的事件（＆＃39; anotherView＆＃39;）;

提前致谢！

Answer 1

使用ng-switch（{{vm.activeView}}）时，您不需要插值。
您没有为vm.activeView分配值。

您的angular.module没有依赖项数组。如果这是您定义模块的位置，则添加它。

(function () {
'use strict';

angular.module('app', []) // add the dependency array
    .controller('SomeController', SomeController);

function SomeController() {
    var vm = this;

    vm.activeView = 'anotherView'; // change this

    function setViewType(viewType) {
        vm.viewTypes = viewType;
    }

    setViewType('anotherView'); // this changes the viewTypes prop
}
})();

检查此JSFIDDLE。

ng-switch不对动态值变化做出反应

1 个答案: