使用 ng-repeat 将表格行数据显示为模态答案

【问题标题】：Display table row data as Modal with ng-repeat使用 ng-repeat 将表格行数据显示为模态
【发布时间】：2016-11-10 08:21:38
【问题描述】：

单击行时，我需要有关使用模式显示行数据的帮助。在它显示在下一行的那一刻。它必须显示与模态相同的数据。我还需要返回列表上的帮助，如何使用 URI/URL 或者更确切地说指向其中的 JSON 文件并避免硬编码数据。附件是一段代码，解释了我所拥有的。

谢谢！

<body>
<table ng-controller="UsersCtrl" class="table table-striped">   
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
</thead>
    <tbody>
        <tr ng-repeat-start="user in users" ng-click="selUser(user)">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
        <tr ng-repeat-end ng-if="isSelected(user)">
            <td colspan="2">{{user.desc}}{{user.name}}{{user.age}}</td>

            <!-- display row details using modal -->

        </tr>
    </tbody>
</table>

<script>
angular.module('App',[])
        .factory('Users',function(){
            return {
                query:function(){
                    return [
                        {name:'John',age:25,desc:'Software Developer at MacroSoft LLC'},
                        {name:'Jonatan',age:26,desc:'Professor at University of Tashkent'},
                        {name:'Nataly',age:27,desc:'Nurse at central hospital'},
                        {name:'Lucy',age:28,desc:'Teacher at district school'}

                        <!-- how do I use a URI/URL in here or point to a JSON File? -->

                    ];
                }
            }
        })
        .controller('UsersCtrl',function($scope,Users){
            $scope.users=Users.query();
            $scope.selUser=function(user){
                $scope.selected_user=user;
            }
            $scope.isSelected=function(user){
                return $scope.selected_user===user;
            }
        });

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap rest

【解决方案1】：

您可以在控制器中使用模态触发器来将内容转换为模态。
您可以查看Angular $http 服务以从某个位置检索 json。

var app = angular.module("sampleApp", []);
app.factory('Users', function() {
    return {
      query: function() {
        return [{
            name: 'John',
            age: 25,
            desc: 'Software Developer at MacroSoft LLC'
          }, {
            name: 'Jonatan',
            age: 26,
            desc: 'Professor at University of Tashkent'
          }, {
            name: 'Nataly',
            age: 27,
            desc: 'Nurse at central hospital'
          }, {
            name: 'Lucy',
            age: 28,
            desc: 'Teacher at district school'
          }

          <!-- how do I use a URI/URL in here or point to a JSON File? -->

        ];
      }
    }
  })
  .controller('UsersCtrl', function($scope, Users) {

  });
app.controller("sampleController", ["$scope", "Users",
  function($scope, Users) {
    $scope.users = Users.query();
    $scope.selUser = function(user) {
      $scope.selected_user = user;
      angular.element('#myModal').modal();
    }
    $scope.isSelected = function(user) {
      return $scope.selected_user === user;
    }

  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table ng-controller="UsersCtrl" class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in users" ng-click="selUser(user)">
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
        </tr>
      </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            {{selected_user.desc}}{{selected_user.name}}{{selected_user.age}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

【讨论】：

【解决方案2】：

第一个问题：您需要打开一些弹出模式来显示选定的用户。在您的 selUser() 函数中，您可以打开显示 selected_user 数据的弹出窗口。此外，您必须删除表格正文中的第二行，这没有任何意义。

$scope.selUser=function(user){
$('#detail').modal('show');
 $scope.selected_user=user;
}
<tr ng-repeat="user in users" ng-click="selUser(user)">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>

第二个问题：要从 JSON 文件中查询数据，您必须为 ex 创建一个 javascript 文件：data.json 并将其包含在 script 标签中。

 <script type="text/javascript" src="data.js"></script>

在 data.js 中将包含用户的 json

var data = [{ name: 'John', age: 25, desc: 'Software Developer at MacroSoft LLC' },
{ name: 'Jonatan', age: 26, desc: 'Professor at University of Tashkent' },
{ name: 'Nataly', age: 27, desc: 'Nurse at central hospital' },
{ name: 'Lucy', age: 28, desc: 'Teacher at district school' }];

这样你就可以从文件中获取json了。

【讨论】：