Angularr - List json and display item selected Fork 2
List json array and add data where item is selected
HTML
<div ng-app="rMailApp">
<h4>Name In List</h4>
<div ng-controller="MainCtrl">
<ul class="pullLeft foldersList">
<li ng-repeat="itemFolder in foldersList">
</li>
</ul>
<ul class="pullLeft mailList">
<li ng-repeat="item in maillist.mails">
<div class="pullLeft mailF">{{item.from}}</div>
<div class="pullLeft mailS">{{item.subject}}</div>
<div class="pullLeft mailA">A:{{item.attachment}}</div>
<div class="clearL"></div>
</li>
</ul>
</div>
</div>
CSS
.pullLeft{float:left;}
.foldersList{background:#eee;border:1px solid #ccc;border-radius:4px;padding:3px;margin:5px;min-width:100px}
.mailList{background:#fff;border:1px solid #ccc;border-radius:4px;padding:3px;margin:5px;width:100%;}
.mailF{width:30%}
.mailS{width:60%}
.mailA{width:10%}
.clearL{clear:left;}
JavaScript
var rMailApp = angular.module("rMailApp", []);
rMailApp.controller("MainCtrl", ["$scope", function ($scope) {
$scope.foldersList = [{name:"Inbox",isSel:false},{name:"Junk",isSel:false}];
console.log("folders",$scope.foldersList);
$scope.changeFolder = function (arrIndex) {
for (var i = 0; i < $scope.tmpArr.length; i++) {
$scope.tmpArr[i].isSelected = false;
}
$scope.tmpArr[arrIndex].isSelected = true;
};
var i,maillist=[];
for (i in $scope.foldersList) {
var foldername = $scope.foldersList[i].name;
maillist[foldername] = {};
maillist[foldername].mails={};
var mails = [];
for (var j = 0; j < 10; j++) {
var tmp = {};
tmp.filename = "12817297.pro.askl1298179812."+i+"askk."+j
tmp.subject = "text subject "+i+j;
tmp.to = "testUser"+j+"@test.com";
tmp.cc = "ccUser"+j+"@test.com";
tmp.from = "fromUser"+j+"@test.com";
tmp.attachment = (j%2===0)?"Yes":"No";
maillist[foldername].mails[tmp.filename] = tmp;
}
}
$scope.maillist = maillist["Inbox"];
console.log($scope.maillist);
}]);