Question

我想创建一个显示人员数据的应用程序，一旦点击单个人，就必须显示该人员的详细信息。我使用（json的索引）为json文件创建了id，但我不知道如何将单独的id传递给弹出函数。

 <div class="content-wrapper" ng-controller="ListController">
 <section class="content">   
   <!-- /.box-header -->

      <div class="box-body table-responsive no-padding">
        <div ng-controller="MainCtrl" class="container">
          <!--controller="MainCtrl"-->
          <table class="table table-hover" ng-model="artists">
            <tr>
              <th>Name</th>
              <th>Profile</th>
              <th>First Name</th>
              <th>Date</th>
              <th>Status</th>
              <th>Reknown</th>
            </tr>


            <tr ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction" id="table-cursor">

              <modal title="{{artists.indexOf(item)}}" visible="showModal">
                <form role="form">
                  <div class="form-group">
                    <label for="text">Name</label>
                    <input type="text" class="form-control" id="email" placeholder="Name" />
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                  </div>
                  <button type="submit" class="btn btn-default">Send</button>
                </form>
              </modal>

              <td ng-click="toggleModal(artists.indexOf(item))"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}">
                  </span>
                <img ng-src="images/{{item.shortname}}_tn.jpg" width="35" height="35" alt="profile">
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>
                <h5>{{item.shortname}}</h5>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>11-7-2014</td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>

              <tr>

          </table>
        </div>
        <!--controller="MainCtrl"-->
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
</div>

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



myApp.controller('ListController', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {
    $http.get('angular/data.json').success(function(data) {
     $scope.artists = data;
     $scope.artistOrder = 'name';
    $scope.whichItem = $routeParams.itemId;
   });
  }
 ]);


myApp.controller('MainCtrl', ['$scope', '$http', '$routeParams',
 function($scope, $http, $routeParams) {
  $http.get('angular/data.json').success(function(data) {
  $scope.showModal = false;
  $scope.artists = data;
  $scope.whichItem1 = $routeParams.itemId;
  $scope.toggleModal = function() {
    $scope.showModal = !$scope.showModal;

  };
 });
 }
]);

 myApp.directive('modal', function() {
  return {
   template: '<div class="modal">' +
  '<div class="modal-dialog">' +
  '<div class="modal-content">' +
  '<div class="modal-header">' +
  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
  '<h4 class="modal-title">{{ title }}</h4>' +
  '</div>' +
  '<div class="modal-body" ng-transclude></div>' +
  '</div>' +
  '</div>' +
  '</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
  scope.title = attrs.title;

  scope.$watch(attrs.visible, function(value) {
    if (value == true)
      $(element).modal('show');
    else
      $(element).modal('hide');
  });

  $(element).on('shown.bs.modal', function() {
    scope.$apply(function() {
      scope.$parent[attrs.visible] = true;
    });
  });

  $(element).on('hidden.bs.modal', function() {

    scope.$apply(function() {
      scope.$parent[attrs.visible] = false;
    });
  });
}
};
});

Answer 1

您需要在方法toggleModal中接收索引：

  $scope.toggleModal = function($index) {
    // here you need to get the user info and
    //set the result to $scope variable that you can you into the modal
    $scope.userInfo = $scope.artists[$index];
  };

然后您可以通过编辑HTML来使用userInfo：

  <div class="form-group">
     <label for="text">Name</label>
     <input type="text" class="form-control" id="email" placeholder="Name" value="{{userInfo.name}}"/>
  </div>

修改
HTML标记＆＃34;模态＆＃34; with attribute＆＃34; visible = true＆＃34;给出了角度[$ rootScope：inprog]错误，实际上我已达到了这个原因。所以我强烈建议你使用标准的bootstrap模态窗口。只需更换你的＆＃34;模式＆＃34; HTML

<modal title="{{artists.indexOf(item)}}" visible="showModal"> <form role="form"> ... </form> </modal>

以下内容：

 <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Chat box</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <label for="text">"name"</label> <input type="text" class="form-control" id="email" placeholder="Name" ng-value="userInfo.name"/> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" value="{{userInfo.password}}"/> </div> <button type="submit" class="btn btn-default">Send</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

然后你就可以从你的控制器中显示它：

$scope.toggleModal = function($index){ $("#myModal").modal({show: true}); $scope.userInfo=$scope.artists[$index]; };

我希望这会有所帮助:)

修改如果你想在不影响背景的情况下打开对话框模态，只需要摆脱＆＃34;背景＆＃34;。所以，模态启动后

$("#myModal").modal({show: true});

只需添加以下代码

$('.modal-backdrop').removeClass("modal-backdrop"); $('#myModal').css('display', 'table')

通过角度js传递json中的id

1 个答案: