Question

所以朋友，

我试图使用带有角度的显示模态，因为我有基于ng-click创建的链接的ng-click注入模态的数据，允许我提供一些代码：

 <table ng-controller="oflClassCtrl">
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "selectedClass in classes | filter:searchTxt">
        <td><a href="#" data-reveal-id="myModal" ng-click="setClass($index)">{{selectedClass.class}}</a></td>

和控制器：

var oflApp = angular.module('oflApp', []);

oflApp.controller('oflClassCtrl', function ($scope,$http) {

        // $http.get('../courses/coursedata.json');
      $scope.classes = [
    {"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},
    {"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"},ect,

$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    

});

我查看了http://pineconellc.github.io/angular-foundation/但是我不确定我只是下载文件并将其链接到头部，然后添加一个新模块？

我想要做的就是，当用户点击将使用ng-repeat显示的相关课程时，我的数据会以显示模式显示。我有一个模板布局，如果我有必要发布它，但基本上只是希望它呈现类信息。

有人可以给我一个如何设置这个PLZ的breif示例。谢谢。

Answer 1

如果将模态代码放在ng-repeat指令中，则无需将数据注入模态。您只需使用data-reveal-id动态生成模式本身的id和ng-attr，以确保模态中的数据与用户点击的链接相关联。

Plunker：http://plnkr.co/edit/RgtaJR?p=preview

在Angular中，您可以使用id

轻松设置ng-atrr s（和许多其他属性）

如果带有绑定的属性以ngAttr前缀为前缀（非规范化为ng-attr-），则在绑定期间，它将应用于相应的未加前缀的属性。这允许您绑定到浏览器急切处理的属性

https://docs.angularjs.org/guide/directive#text-and-attribute-bindings

在Plunker中，我在您的类对象中添加了一个id，以创建一个唯一的标识符，我们可以将其添加到模式的data-reveal-id和id。它是附加的而不是前缀（ng-attr-data-reveal-id="Modal{{class.id}}"），因为querySelector不喜欢带有前导整数的id。见这里：Using querySelector with IDs that are numbers。

这种方法的优点是您的控制器大大简化，并且很清楚您的模态中包含哪些信息。

我希望这会有所帮助。

设置角度基础以使用具有角度的显示模态

1 个答案: