將jQuery代碼重構為Angular JS代碼

Question

我試圖將與jQuery相關的代碼重構為角度代碼。

我有以下用例。 有四種a標簽，對每次點擊a標簽，它下面的事件處理程序中調用，這使得某些div可見。 例如， a標記事件處理程序之一如下所示：

    $("#fistdiv").css('display','none');
    $("#seconddiv").css('display','none');
    $("#thriddiv").css('display','none');
    $("#fourthdiv").css('display','block');

在這種情況下， fourthdiv可見。 每個div在表中顯示特定內容。

我想將此jquery代碼重構為angular-js。 那怎么辦呢？ 而不是查詢dom和綁定事件處理程序，如何用角度來表示？

提前致謝。

Answer 1

很幼稚的方法，但它實際上應該是您需要的：

<a href="#" ng-click="visible = 1">Link 1</a>
<a href="#" ng-click="visible = 2">Link 2</a>
<a href="#" ng-click="visible = 3">Link 3</a>
<a href="#" ng-click="visible = 4">Link 4</a>

<div ng-show="visible == 1">Some content 1</div>
<div ng-show="visible == 2">Some content 2</div>
<div ng-show="visible == 3">Some content 3</div>
<div ng-show="visible == 4">Some content 4</div>

演示： http ： //plnkr.co/edit/QyCzUuBwB4yoAbmsgXid？p = preview

Answer 2

您應該看看這個指令。

https://docs.angularjs.org/api/ng/directive/ngShow