jquery - 如何在 Angular Material 中显示下拉列表

Question

我是 Angular Material 的新手。所以我正在尝试使用有 Angular Material 来制作表格。我能够显示输入字段。由于它没有值，字段名称将看起来像占位符，如果用户单击输入字段，字段名称将设置为标题并能够输入值。

我正在尝试显示与 Material 输入字段相同的下拉菜单。最初，如果没有选择任何值，字段名称将看起来像占位符，右上角有箭头。如果用户单击下拉字段，则需要将字段名称设置为标题并打开下拉列表。

我试过了，但我在下拉菜单中遇到了一些问题。

<form name="pForm" role="form">
<!--Personal Info Col-->    
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.fname.$dirty || pForm.$submitted) && pForm.fname.$invalid }" >

<input class="form-control" type="text" name="aname" ng-model="model.aname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="aname"> Name of Account *</label>    
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.lname.$dirty || pForm.$submitted) && pForm.lname.$invalid }" class="help-block">

<input class="form-control" type="text" name="dname" ng-model="model.dname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Display Name *</label>
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.dname.$dirty || pForm.$submitted) && pForm.dname.$invalid}" >

<input class="form-control" type="text" name="acode" ng-model="model.acode" ng-required="true" ng-pattern="/^[A-Za-z0-9_.]*$/" ng-minlength = "1"/> 
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="acode">Account Code *
</label>
</div>
</div>
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.caddress.$dirty || pForm.$submitted) && pForm.caddress.$invalid }" class="help-block">         
<!--<select class="form-control select2" name="segment" ng-model="model.segment" ng-options="item for item in segments" style="width: 100%;" required>
<option value class disabled selected>Select</option>                       
</select>-->

<div class="mad-select" class="group" required>
  <ul>
    <li data-value="1">Option 1</li>
    <li data-value="2 foo">Option 2</li>
    <li data-value="3 bar">Option 3</li>
    <li data-value="4">Option 4</li>
    <li data-value="5">Option long desc 5</li>
    <li data-value="6">Option 6</li>
    <li data-value="7">Option 7</li>
    <li data-value="8">Option 8</li>
  </ul>
  <input type="hidden" name="myOptions" value="3 bar">
</div>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Segment</label>
    /* Script to display dropdown */
<script>
var madSelectHover = 0;
  $(".mad-select").each(function() {
    var $input = $(this).find("input"),
        $ul = $(this).find("> ul"),
        $ulDrop =  $ul.clone().addClass("mad-select-drop");
    $(this)
      .append('<i class="material-icons">arrow_drop_down</i>', $ulDrop)
      .on({
      hover : function() { madSelectHover ^= 1; },
      click : function() { $ulDrop.toggleClass("show"); }
    });
    // PRESELECT
    $ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected");
    // MAKE SELECTED
    $ulDrop.on("click", "li", function(evt) {
      evt.stopPropagation();
      $input.val($(this).data("value")); // Update hidden input value
      $ul.find("li").eq($(this).index()).add(this).addClass("selected")
        .siblings("li").removeClass("selected");
    });
    // UPDATE LIST SCROLL POSITION
    $ul.on("click", function() {
      var liTop = $ulDrop.find("li.selected").position().top;
      $ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop);
    });
  });
  // CLOSE ALL OPNED
  $(document).on("mouseup", function(){
    if(!madSelectHover) $(".mad-select-drop").removeClass("show");
  });    
</script>
</div>

</div>
</div>
</form>



.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid #ccc;
    /* border-radius: 4px; */
    border-top: none;
    border-left: none;
    border-right: none;
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
    /* -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; */
    /*-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
}



/* style for input box */
     .group        { 
  position:relative; 
  margin-bottom:45px; 
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;

}
input:focus     { outline:none; }

label          {
  /*color:#999;*/ 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
}

/* active state */
input:focus ~ label, input:valid ~ label     {
    top:-20px;
    font-size:14px;
    color:#333;
    font-weight: 600;
}

.highlight {
  position:absolute;
  height:60%; 
  /*width:100px;*/ 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}

    .field-name {
        left: 15px;
        top: 5px;
    }

    /* ./ style for input box - END ./ */

    /* style for select dropdown box */

    ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0, 0.2);
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0, 0.3);
}

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

body{
  font: 16px/24px Roboto, sans-serif;
  background: #fafafa;
}


/*
MAD-SELECT by Roko CB
*/
.mad-select .material-icons{
  vertical-align: middle;
}
.mad-select{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-right: 8px;
}
.mad-select ul {
  list-style: none;
  display:inline-block;
  margin:0; padding:0;
}
.mad-select li{
  vertical-align: middle;
  white-space: nowrap;
  height:24px;
  line-height:24px;
  display: none;
  padding: 8px 16px;
  margin:0;
  box-sizing: initial;
}
.mad-select > ul:first-of-type{
   max-width:120px; /* COMMENT FOR AUTO WIDTH */
}
.mad-select > ul:first-of-type li.selected{
  display: inline-block;
  height: 24px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mad-select i.material-icons{
  opacity: 0.5;
  margin:0;
  padding:0;
}
/*jQ*/
.mad-select ul.mad-select-drop{
  position: absolute;
  z-index: 9999;
  visibility: hidden; opacity:0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  top: 0;
  left: 0;
  transition: 0.24s;
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
}
.mad-select ul.mad-select-drop.show{
  visibility: visible; opacity: 1;
  max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
}
.mad-select ul.mad-select-drop li{
  display: block;
  transition: background 0.24s;
  cursor: pointer;
}
.mad-select ul.mad-select-drop li.selected{
  background: rgba(0,0,0,0.07);
}
.mad-select ul.mad-select-drop li:hover{
  background: rgba(0,0,0,0.04);
}

    /* ./ style for select dropdown box - END ./ */

input field

After selecting the dropdown

Answer 1

您的代码似乎没有使用 angular-material 标签，您混淆了 jquery 和 angular，

要使用带 Angular Material ，请为 Angular Material 添加必要的引用

 <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>

并将 ngMaterial 作为依赖项注入(inject)到您的模块中，

var app = angular.module('app', ["ngMaterial"]);

SELECT 演示

// Code goes here


var app = angular.module('app', ["ngMaterial"]);

app.controller('myCtrl', function($scope) {
      $scope.categories = [
            "test1 with 001" ,
            "test2 with 002" 
            ];
      $scope.Print = function(){
        alert($scope.model);
      }
      
  
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
  <div layout="row">
    <md-select placeholder="Select" ng-model="model">
      <md-option ng-repeat="category in categories" value="{{category}}">
        {{category}}
      </md-option>
    </md-select>
  </div>
</body>

</html>