Question

下面我有一个可选择的下拉列表。我需要将选择的值传递给ng-model指令：

ng-model="$root.specCategory_search"

但它不适用于我的例子。我该怎么做？以前我用它选择选项，并且使用ng-model指令工作正常。为此，我在option标签中使用了value =“”属性。

HTML下拉列表

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   <span ng-model="$root.specCategory_search" data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" >
      <li><a href="#">First item</a></li>
      <li><a href="#">Another item</a></li>
      <li><a href="#">This is a longer item that will not fit properly</a></li>
   </ul>
</div>

CSS

.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;

JS

      $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });

Answer 1

在您的情况下，最好的解决方案是创建一个指令，该指令将在单击时附加事件侦听器并提取所需的值。
然后使用隔离范围，您可以绑定下拉列表的值，并在应用程序中的所需位置使用它。

以下是您可以进一步发展的起点：

＆＃13;

(function() {
 
  var app = angular.module('demoApp', []);
  
  app.directive('ddMenu', function() {
    return {
      restrict: 'A',
      scope: {
        ddMenu: '='
      },
      link: function(scope, element) {
        // set the initial value
        var $el = $(element);
        scope.ddMenu = $el.find('li:first').text();
        
        // listen for changes
        $el.on('click', 'li', function() {
          scope.ddMenu = $(this).text();
          scope.$apply(); 
        });
      }
    };
  });
  
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="demoApp">

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   <span ng-bind="ddValue">Select One</span>&nbsp;<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" dd-menu="ddValue" role="menu" >
      <li><a href="#">First item</a></li>
      <li><a href="#">Another item</a></li>
      <li><a href="#">This is a longer item that will not fit properly</a></li>
   </ul>
  
  Val: {{ddValue}}
</div>

＆＃13;

使用ng-model获取<li>值

1 个答案: