Question

我使用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都包含在一个数组中，其中每个etype包含两个项目：一个是选择必须存储在后端的名称，一个是显示名称。它看起来像这样：

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

从用户的角度来看，当他们选择一个选项时，他们会选择Gif Booth，Photo Booth等......但是，＆＃39; gif＆＃39;，＆＃39;照片＆＃39;等。绑定到ng-model event.etype。所以现在当我尝试在不再编辑时显示选择时，会出现更丑陋的版本。

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

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

Answer 1

在控制器中，创建一个使用对象点表示法而不是嵌套数组的新范围变量：

$scope.etypes = [['gif','GIF Booth'], ['photo','Photo Booth'], ['ipad', 'iPad'], ['video','Video Booth'], ['print','#Print']];
$scope.all_etypes = [];
for (var i=0; i < $scope.etypes.length; i++) {
    $scope.all_etypes.push({ id: $scope.etypes[i][0], name: $scope.etypes[i][1] });
}

此代码将创建一个名为all_etypes的新范围变量，如下所示：

[
  { id: 'gif', name: 'GIF Booth' },
  { id: 'photo', name: 'Photo Booth' },
  { id: 'ipad', name: 'iPad' },
  { id: 'video', name: 'Video Booth' },
  { id: 'print', name: '#Print' },
]

这更容易使用。

现在，更新您的HTML以使用这个新的范围变量：

<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 all_etypes" ng-value="etype.id">{{etype.name}}</option>
    </select>
</div>

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

Answer 2

首先，最好使用像：

这样的对象

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

观点：

<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">{{etype.name}}</option>
      </select>
</div>

第二视图：

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

要发送它，您必须过滤该对象。

Answer 3

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

           <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。我相信这就是你要找的东西。如果不是，请告诉我。也许我没有正确理解你的问题。

在角度模型中显示数据的问题

3 个答案: