Question

单击行时，我需要使用模式显示行数据的帮助。在它会显示在下一行。它必须显示与模态相同的数据。我还需要返回列表上的帮助，如何使用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;
            }
        });

Answer 1

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

＆＃13;

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;
    }

  }
]);

＆＃13;

<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>

＆＃13;

Answer 2

第1个问题：您需要打开一些弹出模式以显示所选用户。在 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：data.json创建一个javascript文件，并将其包含在脚本标记中。

 <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。

使用ng-repeat将表格行数据显示为Modal

2 个答案: