javascript - Issue displaying data in angular model -
i have created dropdown using ng-repeat looks 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 product</option> <option ng-repeat="etype in etypes" ng-value="etype[0]">{{etype[1]}}</option> </select> </div>
in controller, of etypes contained in array each etype contains 2 items: 1 name selection must stored in on backend , 1 display name. looks this:
$scope.etypes = [['gif','gif booth'], ['photo','photo booth'], ['ipad', 'ipad'], ['video','video booth'], ['print','#print']];
from user perspective, when selecting option, choose gif booth, photo booth, etc... however, 'gif', 'photo', etc. gets bound ng-model event.etype
. when try , display selection when no longer editing, uglier version appears.
<tr ng-hide="editconfig"> <th>product type</th> <td style="overflow: hidden">{{event.etype}}</td> </tr>
is there way solve within html? in advance.
you can change model , value take entire array string convert 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 product</option> <option ng-repeat="etype in etypes" ng-value="etype">{{etype[1]}}</option> </select> </div>
you selected: {{selected}}
and in js:
$scope.showevent = function(e){ var array = e.split(',') $scope.selected = array[1]; }
here plunker. believe looking for. if not, let me know. maybe not understanding issue correctly.
Comments
Post a Comment