Question

我试图在AngularJS中设置下拉列表类型，但我遇到了一些问题。

1）即使ng-options中指定的$ scope变量发生变化，选项也不会更新。

2）下拉箭头位于预先输入框本身的右侧。

如何解决这些问题？

角色代码：

<script>
angular.module('myApp', [])
.controller('StateSelectCtrl', function($scope) {

  $scope.states = [{
    name: 'Georgia'
  }, {
    name: 'Illinois'
  }, {
    name: 'Nevada'
  }, {
    name: 'New Jersey'
  }, {
    name: 'California'
  }];

  $scope.button = function() {
    $scope.states = [{
    name: 'Florida'
  }, {
    name: 'New York'
  }, {
    name: 'Missouri'
  }, {
    name: 'Ohio'
  }, {
    name: 'Oregon'
  }];
    console.log($scope.states);
  }
})

.directive('combobox', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch("selectedState", function () {
                    if (!scope.comboboxSetup) {
                        $(".combobox").combobox();
                        scope.comboboxSetup = true;
                    }
                });
            }
        }
    });

HTML：

<body ng-app="myApp">
  <form class="form-horizontal">
    <fieldset>
      <div class="container-fluid" ng-controller="StateSelectCtrl">
        <h2>Device ID:</h2>
        <select combobox class="combobox input-large" ng-model="selectedState" ng-options="state.name for state in states">
          <option disabled value="">Select a Device</option>
        </select>
          <button ng-click="button()">Click me</button>
      </div>
    </fieldset>
  </form>

  <script type="text/javascript">
    //<![CDATA[
    //$(document).ready(function() {
      //$('.combobox').combobox()
    //});
    //]]>
  </script>
</body>

Angular JS Bootstrap Dropdown Typeahead

0 个答案: