我想從JSON文件中提取數據並使用它來填充導航菜單，由Div使用Angular UI可摺疊函數摺疊組成。吳重複不顯示JSON數據在Angular-UI
我包圍的普拉克：Plunk of the issue
我的問題是：
- 我不能讓內的可摺疊的元素採取JSON的信息。如果我在其中一個div上設置ng-repeat，那麼sub或super div將不會接受它。在outermoest div上設置ng-repeat會導致沒有任何子div進行重複。
- 我在我的控制器中加入了指令，併爲摺疊函數和HTTP GET指定了同一個div。
任何幫助將不勝感激。
這是我第一次使用Plunk，所以請讓我知道如果我錯了，我會更新。
*更新了Plunkr。
額外{{sub}}似乎有錯誤（張貼，所以這不僅僅是一個謝謝）。並感謝你讓我的夜晚。 –
而且修改你的plunkr工作：
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="[email protected]*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
基本上指令旨在用於添加包封的行爲或DOM元素操縱。我認爲服務對於處理對服務器的請求並存儲要由各種控制器使用的數據更有意義。
我還使用了數據來存儲isCollapsed布爾值，因此您可能需要遍歷數據並將其設置爲false，如果您希望它們最初關閉或否則只是在摺疊表達式中反轉布爾邏輯。
你有錯誤的地方，所有正確的邏輯，也讀了ng-repeat文件，這是我經常訪問的一塊。
您需要將數據存入控制器，而不是指令。將控制器附加在你的html中，然後你可以在任何地方使用它。指令不是用於獲取數據，而是用於以有趣的方式使用它。 –
@ZackArgyle如果你看看代碼，我在指令裏面創建了控制器。我這樣做，所以我可以在同一個div上運行兩個控制器，從而執行Bootstrap-UI控制器和JSON-Get控制器。 –
我看了一下你的Plunk - 你的部分代碼與你的JSON不匹配，你試圖使用一個指令來製作一個控制器，你試圖將兩個範圍綁定到同一個元素，而你的指令不會鏈接任何東西。你在做什麼似乎很簡單，但也許你應該開始一個角度教程？ –