Search code examples
angularjstwitter-bootstrapmulti-selectangular-strap

AngularStrap select not working with Bootstrap modal

At every first time I load my data and click on the first row to get them for 'Edit' on Bootstrap modal popup window, the multi select drop down (from AngularStrap) inside the modal window is throwing an error: Error: 'undefined' is not an object (evaluating 'j.$matches[a].value') and it is not working as expected. But when I click some other data from the same list and come back for the first one to edit, then everything works fine for me.

Please help.

Solution

  • This might be an issue with angularJS ng-options format. After providing the expected ng-options format it is working fine here.

    Wrong format:

    JS

    $scope.selectedFruits = "";
$scope.selectedFruits = ['Apple', 'Orange'];
$scope.fruits = [
{value: 'Mango'},
{value: 'Apple'},
{value: 'Orange'},
{value: 'Papaya'}];

    HTML

    <button type="button" class="btn btn-default" ng-model="selectedFruits" data-html="1" data-multiple="1" data-animation="am-flip-x" ng-options="fruit.value for fruit in fruits" bs-select>
  Action <span class="caret"></span>
</button>

    Expected format:

    JS

    $scope.fruits = [
{value: 'Mango', label: 'Mango'},
{value: 'Apple', label: 'Apple'},
{value: 'Orange', label: 'Orange'},
{value: 'Papaya', label: 'Papaya'}];

    HTML

    <button type="button" class="btn btn-default" ng-model="selectedFruits" data-html="1" data-multiple="1" data-animation="am-flip-x" ng-options="fruit.value as fruit.label for fruit in fruits" bs-select>Action <span class="caret"></span></button>