从引导程序模态到输入字段获取参数 [英] get params from bootstrap modal to input field

问题描述

我的代码有一些错误，我将bootstrap v3.3与bootstrap的jquery默认值，angular v1.4和指令dirPagination一起用于表分页. 我正在使用模式引导程序，以将某些值从模式输入字段传递到父页面上的输入字段.这是我的代码:

I have something error with my code, i use bootstrap v3.3 with jquery default from bootstrap, angular v1.4 and directive dirPagination for table paging. I am use modal bootstrap for pass some value from input field on the modal to input field on parent page. This is my code :

.js

$(function() {
    $('#listUser').on('click', '.pilih', function(e) {
        var samaccountname = $('#samaccountname_modal').val(); //pass from here
        //var question = $('#question_modal').val(); //pass from here
        $('#samaccountname_input').val(samaccountname); //to here
        //$('#question_input').val(question); //to here
        $('#listUser').modal('hide'); //close modal

        //console.log(samaccountname);
        //console.log(question);
    });
});

我的html输入字段

<div class="input-group col-md-11">
                        <span class="input-group-addon">
                            <button type="button" class="btn btn-info btn-sm pull-right" data-target="#listUser" data-toggle="modal"><i class="material-icons">face</i></button>
                        </span>
                        <div class="form-group is-empty"><!-- id=samaccountname get value from modal -->
                            <input type="text" name="samaccountname" id="samaccountname_input" class="form-control" placeholder="click blue button for search.." readonly required />
                            <span class="material-input"></span>
                            <span id="result" />
                        </div>

然后是我的模态

<!-- Modal Add --><div class="modal fade" id="listUser" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
              </div>
    <div class="modal-body" ng-controller="ctrlList">
        <form class="form">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="material-icons">search</i>
                    </span>
                    <div class="form-group is-empty">
                        <input autofocus type="text" class="form-control" ng-model="search" placeholder="Type text here.." />
                       <span class="material-input"></span>
                    </div>
                </div>
            </div>
            </form>
            <table class="table table-bordered table-hover table-striped">
                    <thead>
                      <tr style="font-size:12px;">
                        <th style="text-align: center;">No</th>
                        <th style="text-align: center;" ng-click="sort('nik')">NIK
                          <span class="glyphicon sort-icon" ng-show="sortKey=='nik'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('nama_karyawan')">Nama Karyawan
                          <span class="glyphicon sort-icon" ng-show="sortKey=='nama_karyawan'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('jabatan')">Jabatan
                          <span class="glyphicon sort-icon" ng-show="sortKey=='jabatan'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th style="text-align: center;" ng-click="sort('department')">Department
                          <span class="glyphicon sort-icon" ng-show="sortKey=='department'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th>Pilih</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr dir-paginate="adb in dataTable | orderBy:sortKey:reverse | filter:search | itemsPerPage: pageSize" pagination-id="listuserldap" style="font-size: 11px;">
                        <td>{{ $index+1 }}</td>
                        <td>{{ adb.nik }}</td>
                        <td>{{ adb.nama_karyawan }}</td>
                        <td>{{ adb.jabatan }}</td>
                        <td>{{ adb.department }}</td>
                        <td><!-- here my button pass to input value -->
                            <input class="btn btn-xs pilih" 
                                   type="button" value="{{ adb.nik }} , {{ adb.nama_karyawan }}" 
                                   id="samaccountname_modal" />

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

    </div>
    <div class="modal-footer">
        <div ng-controller="ctrlPagination">
          <div class="text-center">
            <dir-pagination-controls pagination-id="listuserldap" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="<?php echo Config::get('URL'); ?>pagination"></dir-pagination-controls>
          </div>
        </div>
    </div>
  </div>
</div>

和结果 mymodal

和我的问题 如果我在表格模式上单击否"以外的其他项，则父菜单上的值输入字段始终会从否" 1传递.请给我一些解决方案，请 谢谢

and my problem if i click other than no 1 on the table modal, value input field on parent menu always get passing from no 1. please give me some solution, please thanks

ikwijaya

推荐答案

您需要获取当前单击的按钮值，因此只需使用$(this).val();

you need to get the currently clicked button value so you just use $(this).val();

更改:

 var samaccountname = $('#samaccountname_modal').val();

收件人:

var samaccountname = $(this).val();

注意:

id属性不能重复.id属性应该是唯一

id attribute should not repeat .id attribute should be unique

这篇关于从引导程序模态到输入字段获取参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！