wake-up-neo.com

durchsuchbares Dropdown in AngularJs

Ich hole Daten von der API ab und brauche eine durchsuchbare dropdown, so dass mir beim Tippen die Daten angezeigt werden, die von der API stammen. Momentan habe ich diesen Code.

<select  class="formControl" name="repeatSelect" id="repeatSelect" ng-model="facilitiesData.business_id">
    <option ng-repeat="option in businesses" value="{{option.id}}">{{option.business_name}}</option>
</select>

Vielen Dank.

angularjssearchfilterdropdown
3
Usman Iqbal

Wahrscheinlich suchen Sie das . Dies könnte eine der Lösungen sein.

Dies hat einen anderen Typ von typeaheads. Sie können einen nach Ihren Bedürfnissen auswählen.

<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

Note - Sie benötigen eine Bibliothek ui-bootstrap-tpls, die offiziell vom AngularJS-Team erstellt wurde.

6
MAC

Versuche dies. Sie können das Textfeld nicht direkt in die Option einfügen und die Auswahl basierend auf der Auswahl filtern. Aber dies ist eine Möglichkeit, die Sie so anlegen können. Eine andere Möglichkeit ist die Verwendung von Plugins oder eckigem Materialdesign.

// Angular

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

myApp.controller('ListCtrl', function($scope) {
  $scope.items = [{
    'name': 'Item 1'
  }, {
    'name': 'Item 2'
  }, {
    'name': 'Account 3'
  }, {
    'name': 'Account 4'
  }, {
    'name': 'Item 5'
  }, {
    'name': 'Item 6'
  }, {
    'name': 'User 7'
  }, {
    'name': 'User 8'
  }];
});

// jQuery
$('.dropdown-menu').find('input').click(function(e) {
  e.stopPropagation();
});
.dropdown.dropdown-scroll .dropdown-menu {
  max-height: 200px;
  width: 60px;
  overflow: auto;
}

.search-control {
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="dropdown dropdown-scroll" ng-app="app">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
    <li role="presentation">
      <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
      </div>
    </li>
    <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
    </li>
  </ul>
</div>

5
Krupesh Kotecha

sie können datalist Tag auch verwenden, wenn Sie Ihr eigenes durchsuchbares Dropdown-Menü erstellen möchten. Hier ist der Arbeitscode:

HTML-Teil:

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="myCtrl">
    <form ng-submit="click(search);">
      <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
      <input type="text" ng-model="search" list="names">
      <datalist id="names" class="form-control" ng-model="name">
        <option value=''>-- select an option --</option>
        <option ng-repeat="option in contacts | filter:search | limitTo:3" value="{{option.name}}"></option>

      </datalist>
      <button type="submit">Submit</button>
    </form>
  </div>
</body>

</html>

JS Part:

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
  $scope.showContacts = function() {
    $scope.contacts = [{
      id: 1,
      name: "Ben",
      age: 28
    }, {
      id: 2,
      name: "Sally",
      age: 24
    }, {
      id: 3,
      name: "John",
      age: 32
    }, {
      id: 4,
      name: "Jane",
      age: 40
    }];

  };
  $scope.showContacts();
  $scope.click = function(MyData) {
    alert(JSON.stringify(MyData));
  };

});

Eine Arbeitsdemo ist hier verfügbar .. https://plnkr.co/edit/hamW3F05YUPrWwS3RmmG?p=preview

1
Tanu

Du bist auf dem richtigen Weg. Jetzt müssen Sie nur noch einen http-Service oder eine Factory erstellen, die alle keypress einen API-Aufruf auslöst, und das Ergebnis davon füllt Ihr $scope.businesses-Array.

0
nikjohn

Wenn Sie ein durchsuchbares Dropdown-Menü selbst erstellen möchten, können Sie die Filter verwenden . durchsuchbares Dropdown-Menü mit Textfeldern

Wenn Sie sich für ein Plugin entscheiden möchten, prüfen Sie Mehrfachauswahl

Ich habe kürzlich in einem meiner Projekte gebraucht. Es ist ein flexibles Plugin und erlaubt auch die Mehrfachauswahl.

0
Gangadhar Jannu