web-dev-qa-db-fra.com

menu déroulant dans AngularJs

Je récupère les données de l'API et j'ai besoin d'une variable dropdown afin que, lorsque je commence à taper, elle me montre les données provenant de l'API. Actuellement, j'ai ce morceau de 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>

Merci.

angularjssearchfilterdropdown
3
Usman Iqbal

Vous recherchez probablement ceci . Cela pourrait être l'une des solutions.

Cela a différents types de typeaheads. Vous pouvez en choisir un selon vos besoins.

<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 - Vous aurez besoin d'une bibliothèque ui-bootstrap-tpls officiellement créée par l'équipe AngularJS.

6
MAC

Essaye ça. vous ne pouvez pas mettre directement textbox dans une option et filtrer la sélection en fonction. mais c’est une façon de le faire. Une autre méthode consiste à utiliser un plugin ou une conception matérielle angulaire.

// 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

vous pouvez également utiliser la balise datalist Si vous souhaitez créer votre propre menu déroulant interrogeable .. Voici le code de travail:

Partie HTML:

<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));
  };

});

La démo de travail est disponible ici .. https://plnkr.co/edit/hamW3F05YUPrWwS3RmmG?p=preview

1
Tanu

Vous êtes sur le bon chemin. Il vous suffit maintenant de créer un service ou une fabrique http qui déclenche un appel d'API toutes les keypress et dont le résultat remplit votre tableau $scope.businesses.

0
nikjohn

Si vous souhaitez créer vous-même un menu déroulant interrogeable, vous pouvez utiliser des filtres. menu déroulant interrogeable avec des filtres à l'aide de la zone de texte

Si vous voulez aller pour un plugin check multi select angulaire

Je l'ai récemment utilisé dans l'un de mes projets. C'est un plugin flexible et il permet également la multi-sélection.

0
Gangadhar Jannu