我真的是角色的新手,现在我遇到了一个问题。我有一个有多列的网格。其中一列包含的指标只是<a>
标签。
我想要做的是当用户点击我想要显示/隐藏视图的链接时。
该视图将具有自己的控制器和功能。我想将FileId传递给此视图并获取与该文件相关的记录,然后相对于该链接加载div。
所以如果我有两个控制器。
angular.module('testapp', [])
.controller('loader-main', function($scope) {
$scope.filesLoaded = [{
"FileId": 1,
"FileName": "File1.xls",
"RejectedCount": "10",
}, {
"FileId": 2,
"FileName": "File2.xls",
"RejectedCount": "5",
}];
$scope.toggle = function(fileId) { //This function should toggle the rc div
//Not sure how to load the RC div relative to the Link and pass on the FileId
$scope.whenREjectedCOuntClicked = true;
};
})
.controller('rejectedContents', function($scope) {
$scope.whenRejectedCountClicked = false;
//Records are actually fetched from a web service which is commented out.
//I need to pass the file Id that was selected in the loader-main scope..
$scope.records = [{
"Id": 1,
"Name": "ABC"
}, {
"Id": 2,
"Name": "XYZ"
}]
//WebSerivcce.getRecords(FileId);
});
//And here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="testapp">
<body>
<div ng-controller="loader-main">
<table>
<tr>
<th>File Name
</th>
<th>Rejected Count
</th>
</tr>
<tr ng-repeat="file in filesLoaded">
<td>{{file.FileName}}</td>
<td style="text-align: center;"><a href="javascropt:void(0)" ng-click="toggle(file.FileId)">{{file.RejectedCount}}</a>
</td>
</tr>
</table>
</div>
<div name="rc" ng-controller="rejectedContents" ng-show="whenRejectedCountClicked">
<table>
<tr ng-repeat="r in records">
<td>
{{r.Id}}
</td>
<td>
{{r.Name}}
</td>
<tr>
</table>
</div>
</body>
</html>
这是我想要实现的模拟快照。因此,如果用户点击链接5,他会在链接下方的div中看到div和网格。
如果有人需要更多信息,请告诉我......
谢谢.. N