Javascript AngularJS：在更改视图后检查输入状态

我正在处理的站点以两种方式之一显示新闻：列表或网格视图

默认模式为列表。用户可以通过位于顶部的选项更改模式：

选项位于div和标签中：

但是在本页的控制器中没有对这些控件的引用。 视图中的更改是通过jquery进行的：

//列表/网格视图
$（'#查看卡模式.列表视图'）。关闭（'单击'）；
$（“#查看卡模式.列表视图”）。在（'单击'，函数（）上{
$（'.card container'）.addClass（'card-list'）；
$（'.card container'）.removeClass（'card-grid'）；
$（'.actions list'）.show（）；
$（'.actions grid'）.hide（）；
});
$（“#查看卡模式.网格视图”）.off（'click'）；
$（“#查看卡模式.网格视图”）。在（'单击'，函数（）上{
$（'.card container'）.removeClass（'card-list'）；
$（'.card container'）.addClass（'card-grid'）；
$（'.actions list'）.hide（）；
$（'.actions grid'）.show（）；
});

因此，当我单击“网格视图图标”时，函数会在以下div中添加一个类“网格”（默认情况下为列表视图）：

问题是，如果我选择“网格视图”，当我更改页面状态时（例如，我访问一条新闻，然后返回），选择将消失，始终返回列表视图（默认）

有没有办法让我通过angularjs或jquery选择视图？我对angularjs没有什么经验，我仍然试图理解数据绑定背后的逻辑

我搜索了其他类似的问题，但没有任何效果。我甚至尝试将jquery函数转换为angular，但我不确定如何将其绑定到html：

控制器首次尝试：

$scope.view='card container card list'；
$scope.viewTypeSelected=“列表”；
$scope.changeView=函数（）{
如果（$scope.viewTypeSelected==“列表”）{
$scope.view='card container card grid'；
}否则{
$scope.view='卡容器卡列表'；
}
}

控制器第二次尝试：

$scope.viewTypesCtrl=function（）{
var self=这个；
self.views=[“卡片网格”、“卡片列表”]；
self.changeView=changeView；
功能更改视图（视图）{
self.viewSelected=视图；
}
}

我需要澄清的是，现场工作正常，没有问题。我只需要添加这个功能

---

提前感谢。

您的问题是将jQuery与Angular一起使用，这正是人们不赞成它的原因。为什么要使用Angular而不是通过模板绑定？整个过程需要进行重大重构。看看我刚才做的这个回答，可能会帮助你走上正确的道路