jquery - 如何在轮播中添加输入字段？

Question

我正在尝试在轮播中添加部门输入字段

这是我的 HTML 表单

<div class="tree">
    <ul id="carouselDiv" class="caurosel-box">
        <li style="width: 75%;" >

            <flex-slider slider-id="carousel"
                flex-slide="department in data.departments track by $index" animation="slide"
                animation-loop="false" item-width="240" item-margin="1"
                as-nav-for="#slider" slideshow="false" control-nav="false">
            <ul style="margin-top: 20px; width:100%;"  >

                <li id="sl">
                    <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="" ng-model="department.name" ng-blur="addDepartment(department);">

                    <label style="width:95%; text-align:left;" for="inputEmail3">DEPARTMENT</label>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" style="width:95%;height:50px;" type="button" data-toggle="dropdown">HR
                        <span class="caret" style="margin-left:60%"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Manager</a></li>

                        </ul>
                    </div>

                    <ul style="height:200px;width:100%;margin-top: 20px;border-radius:5px;">
                        <li style="background-color:#fff">
                            <div style="width:225px;white;border-radius:5px; padding: 0 10px 0px 10px;">
                                <div class="strike">
                                    <span>{{department.name}}</span>
                                </div>
                                <label class='control-label pull-left'>ROLES</label>
                                <div ng-repeat="role in department.roles track by $index">
                                    <div class="form-group">
                                        <input type="text" class="form-control grn-text-input" value="{{role.name}}" readonly/>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="button" ng-click="currentDepartment(department.name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="width:90%;background-color:#3CC01A" id="button" name="button" value="Add Role" />
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            </flex-slider>  
        </li>

    </ul>
</div>

这里是输入框:

<li style="width:25%;">
                    <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="{{department.name}}" ng-model="department.name" ng-blur="addDepartment(department);">
            </li>

我想在轮播框中添加这个字段。如何正确放置此输入字段，请给我一些建议。

Answer 1

我想这就是您想要的，根据“宽度”和内联样式假设在 carroussel 旁边输入输入。

<div class="tree">
        <ul id="carouselDiv" class="caurosel-box">
            <li style="width: 75%;" >

                <flex-slider slider-id="carousel"
                    flex-slide="department in data.departments track by $index" animation="slide"
                    animation-loop="false" item-width="240" item-margin="1"
                    as-nav-for="#slider" slideshow="false" control-nav="false">
                <ul style="margin-top: 20px; width:100%;"  >

                    <li id="sl">
                        <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="" ng-model="department.name" ng-blur="addDepartment(department);">

                        <label style="width:95%; text-align:left;" for="inputEmail3">DEPARTMENT</label>
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" style="width:95%;height:50px;" type="button" data-toggle="dropdown">HR
                            <span class="caret" style="margin-left:60%"></span></button>
                            <ul class="dropdown-menu">
                              <li><a href="#">Manager</a></li>

                            </ul>
                        </div>

                        <ul style="height:200px;width:100%;margin-top: 20px;border-radius:5px;">
                            <li style="background-color:#fff">
                                <div style="width:225px;white;border-radius:5px; padding: 0 10px 0px 10px;">
                                    <div class="strike">
                                        <span>{{department.name}}</span>
                                    </div>
                                    <label class='control-label pull-left'>ROLES</label>
                                    <div ng-repeat="role in department.roles track by $index">
                                        <div class="form-group">
                                            <input type="text" class="form-control grn-text-input" value="{{role.name}}" readonly/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="button" ng-click="currentDepartment(department.name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="width:90%;background-color:#3CC01A" id="button" name="button" value="Add Role" />
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                </flex-slider>  
            </li>
            <li style="width:25%;">
                 <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="{{department.name}}" ng-model="department.name" ng-blur="addDepartment(department);">
            </li>
        </ul>
    </div>