如何通過循環瀏覽json數據來將li標籤設置爲活動狀態？

我目前有一個json文件，有頁面標題和內容數據。

像這樣：

[ 
    { 
    "title":"About", 
    "content":"About me . . . . . . " 
    }, 
    { 
    "title":"Contact", 
    "content":"Reach me . . . ." 
    }, 
    { 
    "title":"Create a Post", 
    "content": "What's on your mind?" 
    } 
]

JSON的數據被附加到的角控制器。 .controller('PageController', ['$scope', '$http', '$routeParams',function($scope,$http,$routeParams){ $http.get('../../../data/pages.json').success(function(data){ $scope.page = data[$routeParams.id]; }); }])

此信息附帶有角度js和ng-repeat的dom視圖。我正在循環ng-repeat="page in pages"，到目前爲止我已成功地看到關於，聯繫人和創建發佈頁面。我甚至可以點擊li標籤併成功轉移到正確的頁面。

但是，我的問題是，li標籤從來沒有註冊活動類。

這是我的代碼片段。

<div class="navbar-collapse collapse navbar-responsive-collapse"> 
<ul class="nav navbar-nav"> 
    <li ng-class="{'active': 1}" ng-repeat="page in pages"><a href="#/page/{{pages.indexOf(page)}}">{{page.title}}</a></li> 
</ul>

我怎樣才能LI標記設置爲激活這一設置？

來源

2015-10-07 Felice

重複的問題看http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs – MaheshKumar

在我看來，您正在使用page.title和page.content在視圖中的某個地方實際顯示頁面的標題和內容。

有，你可以設置這樣做 <li ng-class="{'active': page.title === currentPage.title}" ng-repeat="currentPage in pages"><a href="#/page/{{pages.indexOf(currentPage)}}">{{currentPage.title}}</a></li>

這兩個可用的手段如果您發佈整個視圖和控制器，這將是比較容易診斷，雖然

來源

2015-10-07 18:45:43 Vulturous

謝謝你，對於遲到的回覆感到抱歉。你是對的我錯過了一些內容，我確實有一個page.content和page.title。不過，我似乎找出了問題所在。因爲我正在使用bootstrap-material-design，所以我能夠在dom頁面中修改使用此腳本的活動鏈接的高亮顯示。（script type =「text/javascript」> $（document）.ready（function（） {.0} .material.init（）; }）; '''感謝您的幫助。 – Felice

如何通過循環瀏覽json數據來將li標籤設置爲活動狀態？

回答

相關問題