Unable to display specific data in Drop Down using AngularJS

Question

Unable to display specific data in Drop Down using AngularJS

I've encountered an issue with my dropdown menu not displaying data when I select the appropriate option. There are two choices available.

CSHTML

<ui-select ng-model="ctrl.requestType" theme="selectize" title="Choose type of requisition" style="min-width: 140px;">

  <ui-select-match placeholder="Select type of requisition">
    <span ng-bind="$select.selected.name"></span>
  </ui-select-match>

  <ui-select-choices repeat="existingRequestType.name as existingRequestType in ctrl.existingRequestTypes | filter: $select.search">

    <span ng-bind-html="existingRequestType.name| highlight: $select.search"> - 
       </span>
  </ui-select-choices>
</ui-select>

Angular.JS format

app.controller('myCtrl', function($scope, $http, $timeout, $interval) {
      vm.existingRequestTypes = [{
          name: 'Purchase'
        },
        {
          name: 'Lease'
        }
      ];
    }

Appreciate any assistance provided!

html css angularjs

Answer 1

Answer №1

I have a feeling that you may have overlooked defining the variable vm:

app.controller('myCtrl', function($scope, $http, $timeout, $interval) {
  var vm = this;

  vm.existingRequestTypes = [{
      name: 'Purchase'
    },
    {
      name: 'Lease'
    }
  ];
}

OR

app.controller('myCtrl', function($scope, $http, $timeout, $interval) {
  $scope.existingRequestTypes = [{
      name: 'Purchase'
    },
    {
      name: 'Lease'
    }
  ];
}

Answer 2

I have a feeling that you may have overlooked defining the variable vm:

app.controller('myCtrl', function($scope, $http, $timeout, $interval) {
  var vm = this;

  vm.existingRequestTypes = [{
      name: 'Purchase'
    },
    {
      name: 'Lease'
    }
  ];
}

OR

app.controller('myCtrl', function($scope, $http, $timeout, $interval) {
  $scope.existingRequestTypes = [{
      name: 'Purchase'
    },
    {
      name: 'Lease'
    }
  ];
}

Unable to display specific data in Drop Down using AngularJS

Answer №1

Similar questions

Building conditionals in AngularJS expressions using if-then-else syntax

Where would you start looking if the right side of a table border is not visible?

What are the benefits of refraining from calling functions in AngularJS views to showcase data in a more objective manner?

When bootstrap is imported, SVG is displayed with a square background

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

Optimizing Safari for the Best Screen Size Experience

Having trouble with data retrieval from MySQL using PHP and Angular on certain mobile devices, although it functions properly on desktops and laptops

Displaying images on hover that were not initially incorporated into the project

How to create a customized "Sent" Page using PHPMailer

Concealing and Revealing a Div Element in HTML

What is the best way to manage the changing selection in a drop-down list?

generate an electronic communication using an HTML and PHP template

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

The Challenge of Referencing Javascript Files (including jQuery)

Creating a "select all" feature in an HTML multiple select box with jQuery - a step-by-step guide

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Using jSLint in combination with Angular leads to an unexpected error regarding the variable "$scope"

Stop Gmail from Removing Attached HTML Files

Fixing a div at the top post scroll - bug on iOS mobile device

The table is refusing to align itself in the center