Accessing attribute value of selected option in AngularJS select element

Question

Accessing attribute value of selected option in AngularJS select element

I have a select tag that displays options, and I want it so that when an option is selected, the value of the data-something attribute is copied into the input element. This is just for demonstration purposes; the actual value should be sent in the form.

<input ng-model="refreshedByExample" type="text">
<select ng-model="example">
    <option value="1" data-something="valueForRefreshedByExample1">1</option>
    <option value="2" data-something="valueForRefreshedByExample2">2</option>
    <option value="3" data-something="valueForRefreshedByExample3">3</option>
</select>

Any suggestions on how to achieve this?

Thank you in advance!

javascript angularjs angularjs-ng-change

Answer 1

Answer №1

Just made some adjustments to the code

<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshByExample=example"> 
    <option ng-value="valueForRefreshedByExample1">1</option> 
    <option ng-value="valueForRefreshedByExample2">2</option> 
    <option ng-value="valueForRefreshedByExample3">3</option> 
</select>

For more information, visit ng-value.

Another option is to explore ng-options if dealing with values in an array.

Answer 2

Just made some adjustments to the code

<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshByExample=example"> 
    <option ng-value="valueForRefreshedByExample1">1</option> 
    <option ng-value="valueForRefreshedByExample2">2</option> 
    <option ng-value="valueForRefreshedByExample3">3</option> 
</select>

For more information, visit ng-value.

Another option is to explore ng-options if dealing with values in an array.

Answer 3

Answer №2

Take a look at the code snippet below, it might be what you're searching for. It's a custom directive that handles attribute types.

function exampleController($scope) {

}

function extractValue() {
  return {
    restrict: 'A',
    scope: false,
    link: function($scope, $element, $attr) {
      if ($attr.something) {
        $element[0].value = $attr.something;
      }
    }
  };
}

angular
  .module('app', [])
  .controller('exampleController', exampleController)
  .directive('extractValue', extractValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app">
  <div class="row" ng-controller="exampleController">
    <input ng-model="example" type="text">
    <select ng-model="example">
      <option value="1" data-something="valueForRefreshedByExample1" extract-value>1</option>
      <option value="2" data-something="valueForRefreshedByExample2" extract-value>2</option>
      <option value="3" data-something="valueForRefreshedByExample3" extract-value>3</option>
    </select>
  </div>
</div>

Answer 4

Take a look at the code snippet below, it might be what you're searching for. It's a custom directive that handles attribute types.

function exampleController($scope) {

}

function extractValue() {
  return {
    restrict: 'A',
    scope: false,
    link: function($scope, $element, $attr) {
      if ($attr.something) {
        $element[0].value = $attr.something;
      }
    }
  };
}

angular
  .module('app', [])
  .controller('exampleController', exampleController)
  .directive('extractValue', extractValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app">
  <div class="row" ng-controller="exampleController">
    <input ng-model="example" type="text">
    <select ng-model="example">
      <option value="1" data-something="valueForRefreshedByExample1" extract-value>1</option>
      <option value="2" data-something="valueForRefreshedByExample2" extract-value>2</option>
      <option value="3" data-something="valueForRefreshedByExample3" extract-value>3</option>
    </select>
  </div>
</div>

Answer 5

Answer №3

I find that utilizing ng-options is most effective in these scenarios.

<select ng-model="example" 
  ng-options="item.value as item.id for item in array">
</select>

Here's how the array looks:

$scope.array = [
  {id: 1, value: 'valueForRefreshedByExample1'},
  {id: 2, value: 'valueForRefreshedByExample2'},
  {id: 3, value: 'valueForRefreshedByExample3'}
];

UPDATE:

For the example using values (if valueForRefreshedByExample1 isn't a string, use ngValue):

<input ng-model="example2" type="text">
<select ng-model="example2">
  <option value="valueForRefreshedByExample1">1</option>
  <option value="valueForRefreshedByExample2">2</option>
  <option value="valueForRefreshedByExample3">3</option>
</select>

You can view the examples here https://plnkr.co/edit/gfYak9zkKsAu0I5eQHx0?p=preview

Answer 6

I find that utilizing ng-options is most effective in these scenarios.

<select ng-model="example" 
  ng-options="item.value as item.id for item in array">
</select>

Here's how the array looks:

$scope.array = [
  {id: 1, value: 'valueForRefreshedByExample1'},
  {id: 2, value: 'valueForRefreshedByExample2'},
  {id: 3, value: 'valueForRefreshedByExample3'}
];

UPDATE:

For the example using values (if valueForRefreshedByExample1 isn't a string, use ngValue):

<input ng-model="example2" type="text">
<select ng-model="example2">
  <option value="valueForRefreshedByExample1">1</option>
  <option value="valueForRefreshedByExample2">2</option>
  <option value="valueForRefreshedByExample3">3</option>
</select>

You can view the examples here https://plnkr.co/edit/gfYak9zkKsAu0I5eQHx0?p=preview

Accessing attribute value of selected option in AngularJS select element

Answer №1

Answer №2

Answer №3

Similar questions

Secure multiple confirmations with ngDialog

Is a 'Virtual DOM' included in React Native's architecture?

Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

Error in content policy for CSS in Stripe Checkout

Discover the position within a two-dimensional array

What are some effective strategies for reducing excessive re-rendering of React components?

Selecting multiple items from a grid using the Ionic framework

An anomaly where a mysterious symbol appears in front of every dollar sign in an HTML document

Tips for Avoiding Database Overflow Due to Excessive AJAX Spam Requests

AngularJS Modals within Modals

Problem with Pinia: nested array in an object

Is it possible to create two separate Express sessions simultaneously?

Sending template reference from one Angular component to another

The Heroku app seems to be malfunctioning (Issue with deployment?)

Learn the best way to retrieve the highest number from a Array<String> in TypeScript or JavaScript

An unexpected runtime error occurred due to a SyntaxError: the JSON input abruptly ended during the authentication process with the next-auth module

Storing a portion of AJAX response as a PHP variable

determining the preference between setTimeout and setImmediate

JavaScript: Receiving an error that function is undefined when working with data binding

Filter the specific output in a generator function