angular 模型中的数据显示问题

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>

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

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

从用户的角度来看，当他们选择一个选项时，他们会选择 Gif Booth、Photo Booth 等...但是，'gif'、'photo' 等会绑定到ng 模型 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。我相信这就是您要找的。如果不是，请告诉我。可能我没有正确理解你的问题。

angular 模型中的数据显示问题

Issue displaying data in angular model

html

javascript

angularjs

ng-show

ng-hide