Using <select> value and text for ng model

Question

I currently have this:

<div>
    <label for="market-type">Market Type</label>
    <select id="market-type" type="text" ng-model="tradingFee.market_type">
        <option value="stock">Stock Market</option>
        <option value="otc">OTC Market</option>
    </select>
</div>

which assigns the selected parameter value tradingFee.market_type . I want this to be possible and assign the highlighted text to tradingFee.market_type_human_friendly_text, for example. Just being able to complete one of the tasks is not enough. Is it possible somehow?

Answer 1

You can do this, but not with this syntax. use the ng-optionsng model to save both the value and the display name.

An array of objects is set in your controller:

 $scope.marketType = [{id:"stock", displayName:"Stock Market"}, {id:"otc", displayName:"OTC Market"}];

and

<select id="market-type" type="text"
        ng-model="tradingFee.market_type" 
        ng-options="mt.displayName for mt in marketType track by mt.id">
    <option value="">--Select--</option>
</select>

Now it ng-modelwill have both id and value. Example:

tradingFee.market_type {id:"otc", displayName:"Stock Market"}, . displayName id.

angular.module('app', [])
  .run(function($rootScope) {
    $rootScope.marketType = [{
      id: "stock",
      displayName: "Stock Market"
    }, {
      id: "otc",
      displayName: "OTC Market"
    }];
    $rootScope.tradingFee = {
      market_type: {
        id: 'stock'
      }
    };
  });

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>


<div ng-app="app">
  <select id="market-type" type="text" ng-model="tradingFee.market_type" ng-options="mt.displayName for mt in marketType track by mt.id">
    <option value="">--Select--</option>
  </select>
  {{ tradingFee.market_type }}


</div>

Answer 2

ng-change , , .

<select id="market-type" type="text" ng-model="tradingFee.market_type" 
   ng-change="updateSecondary()">
   <option value="stock">Stock Market</option>
   <option value="otc">OTC Market</option>
</select>