Question

我有html，我需要转换为angular2，但由于没有jquery工作，任何人都可以建议如何使其工作。下面的下拉列表：

<section class="searchBlock">
<!-- index page -->
        <div class="searchSection">
                <div class="container">
                    <h2 class="text-center">Service made easy</h2>
                    <div class="selectbar">
                        <div class="inputBar">
                            <input placeholder="Search Business">
                        </div>
                        <div class="selectBar">
                            <div class="dropdown">
                                <button class="btn_date btn-default dropdown-toggle text-left" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                San Francisco, CA
                                </button>
                                <input type="hidden" name="date_field">
                                <ul class="dropdown-menu fight-check-boxes date-listing" aria-labelledby="dropdownMenu1">
                                <li data-id="1" data-value="">
                                    San Francisco, CA1
                                </li>
                                <li data-id="2" data-value="">
                                    San Francisco, CA2
                                </li>
                                <li data-id="3" data-value="">
                                    San Francisco, CA3
                                </li>
                                <li data-id="4" data-value="">
                                    San Francisco, CA4
                                </li>
                                </ul>
                            </div>
                        </div>
                        <div class="searchBtn">
                            <button><span></span> Search</button>
                        </div>
                    </div>
                </div>
        </div>
    <!-- index page -->
</section>
<script type="text/javascript">
         $(document).ready(function () {
          
            $(".dropdown-menu li").click(function(){
             $(this).parents(".dropdown").find('.btn_date').html($(this).text());
             $(this).parents(".dropdown").find('.btn_date').val($(this).data('value'));
             var data_id = $(this).attr("data-id");
               $(this).parent().siblings("input[type='hidden']").val(data_id);
            });
         });
      </script>

上面的代码片段包含html中的下拉列表我需要让它在angular2中工作

Answer 1

你可以试试这个：

<div class="dropdown">
  <button class="btn_date btn-default dropdown-toggle text-left" type="button" id="dropdownMenu1" (click)="toggleDropdown()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    San Francisco, CA
  </button>
  <input type="hidden" name="date_field">
  <ul class="dropdown-menu fight-check-boxes date-listing" aria-labelledby="dropdownMenu1" *ngIf="dropdown">
    <li data-id="1" data-value="">
      San Francisco, CA1
    </li>
    <li data-id="2" data-value="">
      San Francisco, CA2
    </li>
    <li data-id="3" data-value="">
      San Francisco, CA3
    </li>
    <li data-id="4" data-value="">
      San Francisco, CA4
    </li>
  </ul>
</div>

在您的.ts文件中：

public dropdown: boolean = false;

public toggleDropdown() {
   this.dropdown = !this.dropdown
}

您的ul标签将显示/隐藏下拉变量

的依赖性

Html到Agular2如何使下拉工作。

1 个答案: