显示有关ng点击的视图

时间:2014-12-09 10:45:22

标签: angularjs angularjs-directive angularjs-ng-repeat angular-ui

我真的是角色的新手,现在我遇到了一个问题。我有一个有多列的网格。其中一列包含的指标只是<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和网格。

showhidediv

如果有人需要更多信息,请告诉我......

谢谢.. N

0 个答案:

没有答案