tonestrike tonestrike - 3 months ago 10
AngularJS Question

Issue displaying data in angular model

I have created a dropdown using ng-repeat that looks like this:

<div ng-show="editConfig" class="input-group" theme="bootstrap" style="">
<label class="config-row-element ">Product Type</label>
<select class="dropdown-menu scrollable-menu form-control config-dropdown" style="" ng-model="event.etype" id="etype">
<option value="" selected disabled>Select a Product</option>
<option ng-repeat="etype in etypes" ng-value="etype[0]">{{etype[1]}}</option>
</select>
</div>


In the controller, all of the etypes are contained in an array where each etype contains two items: one is the name the selection must be stored in on the backend and one is the display name. It looks like this:

$scope.etypes = [['gif','GIF Booth'], ['photo','Photo Booth'], ['ipad', 'iPad'], ['video','Video Booth'], ['print','#Print']];


From the user perspective, when they are selecting an option, they choose from Gif Booth, Photo Booth, etc... however, the 'gif', 'photo', etc. gets bound to the ng-model
event.etype
. So now when I try and display the selection when they are no longer editing, the uglier version appears.

<tr ng-hide="editConfig">
<th>Product Type</th>
<td style="overflow: hidden">{{event.etype}}</td>
</tr>


Is there a way to solve this easily just within HTML? Thanks in advance.

Answer

You can change your model and your value to take the entire array string then convert it to an array on change.

           <div class="input-group" theme="bootstrap" style="">
            <label class="config-row-element ">Product Type</label>
  <select class="dropdown-menu scrollable-menu form-control config-dropdown"  ng-model="etype" ng-change="showEvent(etype)">
      <option value="" selected disabled>Select a Product</option>
      <option ng-repeat="etype in etypes" ng-value="etype">{{etype[1]}}</option>
  </select>
    </div>

You selected: {{selected}}

And in your js:

 $scope.showEvent = function(e){
  var array = e.split(',')
  $scope.selected = array[1];
}

Here is a Plunker. I believe this is what you are looking for. If it is not, just let me know. Maybe I am not understanding your issue correctly.