Tips for obtaining an ID from a dropdown menu and establishing a default value at the top

Question

Tips for obtaining an ID from a dropdown menu and establishing a default value at the top

My code snippet is currently displaying null for the card_id, but I want to ensure that the id and is_default card are displayed on top. How can I achieve this? Whenever I use ng-click, the result displayed is as shown below. My goal is to obtain the selected card_id.

<select ng-model="approvedinvoicesCtrl.currentcard.card_id" >
    <option ng-value="item.card_id"  
        ng-repeat="item in approvedinvoicesCtrl.current_job.cards" 
        ng-selected="item.is_default">{{item.brand +'      '+ item.last_digits}}
    </option>
</select>

Result:

card_id: "",
charge_description: "ff", 
charge_type: "Credit Card Payment"

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

Utilize ngOptions (go to the linked page for more examples) to configure the options for the select list and employ ng-bind to showcase the card_id in the DOM. The functional approach is also used to designate the current card by utilizing Array.prototype.find(). Refer to the example below:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.approvedinvoicesCtrl = {
      current_job: {
        cards: [{
          card_id: 1,
          brand: "BMW",
          last_digits: "Z3",
          is_default: false
        }, {
          card_id: 2,
          brand: "Mercedes",
          last_digits: "713",
          is_default: true
        }, {
          card_id: 3,
          brand: "Audi",
          last_digits: "Q4",
          is_default: false
        }]
      }
    };
    //set the model/default selected item
    $scope.approvedinvoicesCtrl.currentcard = $scope.approvedinvoicesCtrl.current_job.cards.find(CardIsDefault);
    $scope.log = function() {
      console.log('card_id: ', $scope.approvedinvoicesCtrl.currentcard.card_id);
    };
  });

function CardIsDefault(card) {
  return card.is_default;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>Selected brand: <span ng-bind="approvedinvoicesCtrl.currentcard.brand"></span>
  </div>
  <div>Selected Id: <span ng-bind="approvedinvoicesCtrl.currentcard.card_id"></span>
  </div>
  <select ng-options="item.brand+' '+item.last_digits for item in approvedinvoicesCtrl.current_job.cards" ng-model="approvedinvoicesCtrl.currentcard"></select>
  <button ng-click="log();">show card_id</button>
</div>

Answer 2

Utilize ngOptions (go to the linked page for more examples) to configure the options for the select list and employ ng-bind to showcase the card_id in the DOM. The functional approach is also used to designate the current card by utilizing Array.prototype.find(). Refer to the example below:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.approvedinvoicesCtrl = {
      current_job: {
        cards: [{
          card_id: 1,
          brand: "BMW",
          last_digits: "Z3",
          is_default: false
        }, {
          card_id: 2,
          brand: "Mercedes",
          last_digits: "713",
          is_default: true
        }, {
          card_id: 3,
          brand: "Audi",
          last_digits: "Q4",
          is_default: false
        }]
      }
    };
    //set the model/default selected item
    $scope.approvedinvoicesCtrl.currentcard = $scope.approvedinvoicesCtrl.current_job.cards.find(CardIsDefault);
    $scope.log = function() {
      console.log('card_id: ', $scope.approvedinvoicesCtrl.currentcard.card_id);
    };
  });

function CardIsDefault(card) {
  return card.is_default;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>Selected brand: <span ng-bind="approvedinvoicesCtrl.currentcard.brand"></span>
  </div>
  <div>Selected Id: <span ng-bind="approvedinvoicesCtrl.currentcard.card_id"></span>
  </div>
  <select ng-options="item.brand+' '+item.last_digits for item in approvedinvoicesCtrl.current_job.cards" ng-model="approvedinvoicesCtrl.currentcard"></select>
  <button ng-click="log();">show card_id</button>
</div>

Answer 3

Answer №2

To achieve this, make use of the ng-init and ng-options directives as shown below:

<select ng-init="initialSelection = choices[1]" 
        ng-model="initialSelection" 
        ng-options="choice for choice in choices">
</select>

The ng-init directive helps in setting a default value for the selection

Answer 4

To achieve this, make use of the ng-init and ng-options directives as shown below:

<select ng-init="initialSelection = choices[1]" 
        ng-model="initialSelection" 
        ng-options="choice for choice in choices">
</select>

The ng-init directive helps in setting a default value for the selection

Tips for obtaining an ID from a dropdown menu and establishing a default value at the top

Answer №1

Answer №2

Similar questions

Trouble with pinch zoom functionality in a Vue component

Create an array containing the data returned from the Observable<{string, number, string}[]> stream

Multiple renderings of React useEffect

The controller is failing to trigger the "then" function with the deferred object from the mock

The ng-selected attribute is nonfunctional, however, it can modify an option to be selected by using selected="selected" when paired with

Is there a way to prevent the onClick function from being triggered during the rendering process?

A guide to designing a personalized filter for angular-moment

The directive does not actively monitor changes to the value attribute

What is the best way to monitor the elements within ngRepeat in AngularJS?

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Prevent editing in Angular UI-Grid while in view mode

Error encountered: Denied access in AWS Transcription Node JS API

Developing desktop applications using C# scripting

Having trouble setting default value using formControl in a component shared across multiple forms

A new module is unable to load Angular Material

Using Servicenow as a replacement for $sp.getRecord() within a scoped application

Which costs more, using an undefined ng-bind or both ng-bind and ng-show together?

Tips on assigning a data-id attribute

Is it possible to send a ternary expression inside a component as a prop based on whether the condition is true or false?

Struggling to compile TypeScript code