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