How can I showcase a chosen name in a <p> tag using a Select dropdown, and then pass the selected ID to a controller in AngularJS

Question

How can I showcase a chosen name in a <p> tag using a Select dropdown, and then pass the selected ID to a controller in AngularJS

I am working with a select input in my HTML that is populated using ng-options. My goal is to display the selected NAME below, while sending the selected ID back to the controller. I am able to access the required id from ng-model="user.category". How can I achieve displaying the selected name along with showing the available options?

<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control select" required>
  <option value="{{category.name}}">Select a Category</option>
</select>

<p>Selected Name : {{user.retailerBranchId}}</p>

angularjs angular-ngmodel ng-options

Answer 1

Answer №1

<div ng-app="myApp">
  <select ng-model="user.choice" ng-options="option for option in choices" class="form-control" required>
    <option value="{{choice.name}}">Make a Selection</option>
  </select>

  <p>Chosen Option : {{user.choice.id}}</p>
</div>

Answer 2

<div ng-app="myApp">
  <select ng-model="user.choice" ng-options="option for option in choices" class="form-control" required>
    <option value="{{choice.name}}">Make a Selection</option>
  </select>

  <p>Chosen Option : {{user.choice.id}}</p>
</div>

Answer 3

Answer №2

By turning retailerBranchId into a method, you can utilize lodash's _.find() function (or even the native find method). Your user category gets updated based on your selection, which contains the necessary id for reference:

function getRetailerName() {
  return _.get(_.find(this.categories, { id: user.category }), 'name', '');
}

This method also handles failures gracefully; if no matching name or item is found based on the id, it will simply return an empty string.

Update: To implement this method, you would use it as follows:

<p>Available at: {{ user.getRetailerName() }}</p>

However, for optimal usage, consider using it in this manner:

<p data-ng-bind="'Available at: ' + user.getRetailerName()"></p>

Answer 4

By turning retailerBranchId into a method, you can utilize lodash's _.find() function (or even the native find method). Your user category gets updated based on your selection, which contains the necessary id for reference:

function getRetailerName() {
  return _.get(_.find(this.categories, { id: user.category }), 'name', '');
}

This method also handles failures gracefully; if no matching name or item is found based on the id, it will simply return an empty string.

Update: To implement this method, you would use it as follows:

<p>Available at: {{ user.getRetailerName() }}</p>

However, for optimal usage, consider using it in this manner:

<p data-ng-bind="'Available at: ' + user.getRetailerName()"></p>

Answer 5

Answer №3

Could you please attempt the following method?

Controller code to retrieve the selected Category Name:

$scope.getSelectedCategoryDetail=function(selectedCat){
   angular.forEach($scope.categories, function(cat){
      if(selectedCat===cat.id){
         $scope.user.name=cat.name;
      }
   });
};

Template with ng-change event included:

<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control select" required>
  <option value="{{category.name}}" ng-change="getSelectedCategoryDetail(user.category)">Select a Category</option>
</select>


<p>Category Id : {{user.category}}</p>
<p>Category Name : {{user.name}}</p>

Answer 6

Could you please attempt the following method?

Controller code to retrieve the selected Category Name:

$scope.getSelectedCategoryDetail=function(selectedCat){
   angular.forEach($scope.categories, function(cat){
      if(selectedCat===cat.id){
         $scope.user.name=cat.name;
      }
   });
};

Template with ng-change event included:

<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control select" required>
  <option value="{{category.name}}" ng-change="getSelectedCategoryDetail(user.category)">Select a Category</option>
</select>


<p>Category Id : {{user.category}}</p>
<p>Category Name : {{user.name}}</p>

How can I showcase a chosen name in a <p> tag using a Select dropdown, and then pass the selected ID to a controller in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Transform variable names from Java and AngularJS conventions to standard English

Avoid causing the newline character to display

Angular $resource encounters a 400 Bad Request error when attempting a PUT request, triggering the $resolve and $promise

Loading large amounts of data efficiently with Angular and Firebase

Passing a message from a directive in AngularJS using event broadcasting

Error: Trying to access properties of an undefined object (specifically 'promise.data.map')

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

Issues with Ionic Toggle displaying incorrect value

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Utilize Django's TemplateView in ModelAdmin's add_view for seamless integration

The Challenge of Upgrading from AngularJS 1 to Angular 2: An Adapter Solution

Angularjs is encountering an issue because there is no 'Access-Control-Allow-Origin' header on the requested resource

In Chrome version 69.0.3497.100, material design does not display dynamic elements off the screen

Local variables in AngularJS across multiple Angular applications

AngularJS ui-select not responding correctly to selected items

Can someone clarify the distinction between returning a value directly or using Promise.resolve within the then() function?

angular setting the scroll offset in ng-infinite scroll

Struggling to send information using Angular $resource?

"Crafting a Personalized TabControl Directive in AngularJS: Step-By-

Saving resources with a promise in Angular