javascript - 在 Angular 模型中显示数据问题

我使用ng-repeat创建了一个下拉列表，如下所示：

            <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>

在控制器中，所有etypes都包含在一个数组中，其中每个etypes包含两项：一项是所选内容必须存储在后端的名称，另一项是显示名称。看起来像这样：

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

从用户的角度来看，当他们选择一个选项时，他们从Gif Booth，Photo Booth等中进行选择……但是，“ gif”，“ photo”等将绑定到ng-model event.etype。因此，现在当我尝试在不再编辑它们时显示选择时，将显示较丑的版本。

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

有没有办法仅在HTML中轻松解决此问题？提前致谢。

最佳答案

您可以更改模型和值以采用整个数组字符串，然后在更改时将其转换为数组。

           <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>

您选择了：{{selected}}

在你的js中：

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

这是Plunker。我相信这就是您要寻找的。如果不是，请告诉我。也许我无法正确理解您的问题。