logo
down
shadow

Filter will not work with AngularStrap bs-select and ng-options


Filter will not work with AngularStrap bs-select and ng-options

By : Artasan
Date : November 17 2020, 11:55 AM
should help you out It appears that filter does not get evaluated to generate the option list. You could instead do the filtering in the controller.
In your controller:
code :
  $scope.getIcons = function() {
     return filterFilter(icons, $scope.iconSearch);
  }
<button type="button" class="btn btn-default btn-sm" ng-model="selectedIcon" 
   data-html="1" data-multiple="1" 
   ng-options="icon.value as icon.label for icon in getIcons()" bs-select>
        Action <span class="caret"></span>
 </button>
 <input type="text" class="form-control input-sm" ng-model="iconSearch.value" />
angular.module('app', ['mgcrea.ngStrap', 'ngSanitize']).controller('ctrl', function($scope, filterFilter) {

  $scope.selectedIcons = [];
  
  var icons = [{
    "value": "Gear",
    "label": "<i class=\"fa fa-gear\"></i> Gear"
  }, {
    "value": "Globe",
    "label": "<i class=\"fa fa-globe\"></i> Globe"
  }, {
    "value": "Heart",
    "label": "<i class=\"fa fa-heart\"></i> Heart"
  }, {
    "value": "Camera",
    "label": "<i class=\"fa fa-camera\"></i> Camera"
  }];

  $scope.getIcons = function() {
     return filterFilter(icons, $scope.iconSearch);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div ng-app="app" ng-controller="ctrl">
  <button type="button" class="btn btn-default btn-sm" ng-model="selectedIcon" data-html="1" data-multiple="1" ng-options="icon.value as icon.label for icon in getIcons()" bs-select>
    Action <span class="caret"></span>
  </button>
  <input type="text" class="form-control input-sm" ng-model="iconSearch.value" />
 
</div>


Share : facebook icon twitter icon
Disable selectbox options using Angularstrap

Disable selectbox options using Angularstrap


By : avocadostorm
Date : March 29 2020, 07:55 AM
will help you It seems you are using AngularStrap v1.x, which is outdated and not supported anymore. In AngularStrap v2.x, select is done this way:
code :
<button type="button" class="btn btn-default"
    ng-model="selectedIcon"
    data-html="1"
    ng-options="icon.value as icon.label for icon in icons"
    bs-select>
  Action <span class="caret"></span>
</button>
Moving from bs-options in angularstrap to select in vanilla

Moving from bs-options in angularstrap to select in vanilla


By : NexusOne HTC
Date : March 29 2020, 07:55 AM
To fix the issue you can do It should be ng-model="selectedPitch" and not ng-model="{{selectedPitch}}".
React-select-fast-filter-options does not work properly

React-select-fast-filter-options does not work properly


By : Ivan Zakharov
Date : March 29 2020, 07:55 AM
I hope this helps you . The problem is that you're passing your non-default labelKey property to react-virtualized-select but not passing it to react-select-fast-filter-options (which is what's actually indexing your data). This second library accepts a labelKey param; (check out the params documentation).
So the fix is to do this:
code :
const filterOptions = createFilterOptions({
  labelKey: 'content',
  options
});
react-select-fast-filter-options filter does not work

react-select-fast-filter-options filter does not work


By : Hùng Đặng
Date : March 29 2020, 07:55 AM
I wish this help you I am not sure about your ** tag, seems it is used to comment the code.
However, if we skip that ** tag then your code is good, except you are filtering your filterOptions: filterOptions = createFilterOptions({ ... }) within the constructor which is ONLY executed ONCE when the component is initialized.
code :
componentWillReceiveProps(nextProps) {
  const filterOptions = createFilterOptions({
    labelKey: 'code',
    options: nextProps.options
  });
  this.setState({filterOptions});
  this.sortOptions(nextProps.options);
}
AngularStrap typeahead ng-options - different label than model

AngularStrap typeahead ng-options - different label than model


By : Christoff Heunis
Date : March 29 2020, 07:55 AM
I hope this helps . I think you mean that you want your input to be a label or obj.label of the selected obj, but want to maintain the selected information of the obj.
You can capture the $on selected event an add .label
Related Posts Related Posts :
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • a sensible approach to highcharts x-axis labels
  • IDE autocompletion for javascript AMD loading style
  • Bootstrap menu disappears after first click setting the ul style to none
  • split ajax json response errors in each field
  • how to add javascript in head in cmsms
  • REGEX: Finding the correct occurrence order of some given special characters in a string
  • How do you preserve a JavaScript date's time zone from browser to server, and back?
  • Return binary result from phantomjs webserver
  • must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
  • Replacing a substring of an element's text with another string
  • How do I filter marks greater than or equal to 90 in this array?
  • Modify the text of my radio input button?
  • Clicking on status bar does not scroll to top of app (Trigger.io)
  • Mocha JS: How to highlight specific assertion failure?
  • $.getJSON jquery parsing to HTML
  • Find items of a certain class (a) that are also in other classes (b,c,d)
  • Setting different images for D3 force-directed layout nodes
  • Integrating Dropzone.js with angular
  • Control sprite animation speed
  • Can only one error / success function be assigned for AngularJS $http promises?
  • Working with math in javascript
  • Django variable isnt recognized by javascript
  • $.when does not work with $.scrollTo plugin
  • How to read local xml file using $.ajax?
  • Manifest is not Valid JSON. What is wrong?
  • AngularJS re-initialise JS after statechange
  • WebRupee is not working
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org