在下拉列表中设置不同的标签与 AngularJS 选择器中的选定值答案

【问题标题】：Set different label in dropdown vs selected value in AngularJS selector在下拉列表中设置不同的标签与 AngularJS 选择器中的选定值
【发布时间】：2017-11-07 23:21:36
【问题描述】：

一个表单有 2 个字段，一个选择器和一个（有时）不可编辑的输入字段。当用户在选择器中选择某些内容时，两个字段都会被填充。选择器显示日期时间，相关标签转到不可编辑的字段。为了使选择更加用户友好，我需要在选择器下拉列表中显示与标签连接的数据时间，以允许用户在两个选项具有相同日期但标签不同的情况下选择正确选项。问题是，在用户选择一个选项后，选择器中的选定值应该只有日期而不是标签（这只是显示在它自己的字段中）。为了清楚起见，我添加了两张图片。

这是带有连接日期时间和标签的会话组下拉列表：

选择一个值后，应从显示值中删除标签，因为它显示在“热曲线”字段中：

选择器的 ng-options 代码如下所示：

ng-options="opt.id as ((opt.sessions_datetime | date:'short') + ' (' + (opt.thermal_profiles_label || '') + ')') for opt in selectors.sessions_groups"

如何只在显示下拉列表时添加标签，而不是在选择器显示选定值时添加标签？

我在这里创建了一个简化的 Plunker：

https://plnkr.co/edit/aDVOFuojDhFSV15BdPU0?p=preview

注意：AngularJS 1.5.0

【问题讨论】：

你发的ng-options太复杂了。请在 Fiddle/Plunker 中发布相关代码和演示，帮助我们解决您的问题
添加了一个 Plunker 来提问。 plnkr.co/edit/aDVOFuojDhFSV15BdPU0?p=preview
@DavidCasillas 请看看我的回答。如果您还需要任何帮助，请告诉我。谢谢

标签： angularjs drop-down-menu

【解决方案1】：

我认为您的问题的最佳解决方案是在 ng-options 中添加“group by thermo_profiles_label”。

<select ng-model="selected"
        ng-options="opt.id as (opt.sessions_datetime | date:'short') group by opt.thermal_profiles_label for opt in selectors.sessions_groups">
</select>

如果选择，另一种解决方案（不推荐）可能是隐藏 thermal_profiles_label：

<select ng-model="selected"
        ng-options="opt.id as ((opt.sessions_datetime | date:'short') + (selected != opt.id ? ( '(' + (opt.thermal_profiles_label || '') + ')' ) : '') ) for opt in selectors.sessions_groups">
</select>

在这里查看 plunker 中的示例： https://embed.plnkr.co/kmgCLaXw9Ixo4nADOzlV/

【讨论】：

使用“group by”是个好主意，但不确定它是否适合我的用例。

【解决方案2】：

Ternary conditions 非常有助于解决这类问题。为了满足您的要求，我使用了相同的方法 (ternary conditions)。 What is happening here is whenever a value is selected, you can save the id of that selected value and then make a decision on the base of that id whether to hide or show the labels.

这里是完整的代码。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.session = {
    sessions_groups_id: null,
    thermal_profiles_id: null
  }
  $scope.sessions_groups = [{
    id: 0,
    sessions_datetime: '2017-11-17',
    thermal_profiles_id: 0,
    thermal_profiles_label: 'Baseline'
  }, {
    id: 1,
    sessions_datetime: '2017-11-17',
    thermal_profiles_id: 1,
    thermal_profiles_label: '+24h'

  }];
  $scope.thermal_profiles = [{
    id: 0,
    label: 'Baseline'
  }, {
    id: 1,
    label: '+24h'
  }, {
    id: 2,
    label: '+36h'
  }];
  $scope.sessionsGroupsChange = function(thermal_profiles_id) {
     $scope.sessions_groups.map((e)=>{ 
     if(e.id == thermal_profiles_id)
      $scope.session.thermal_profiles_id = e.thermal_profiles_id
   });
  }

});

<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<!DOCTYPE html>
<html ng-cloak ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    
     
  </head>

  <body ng-controller="MainCtrl">
    
    <p><b>Sessions Groups selector</b>
    <br/>
    The dropdown displays the date concatenated with the thermal profile label
    <br/>
    But after selecting a value it should only display the date. The thermal profile label will be visible in the thermal profiles selector 
    </p>
		<select id="sessions_groups_id"
				name="sessions_groups_id"
				ng-model="session.sessions_groups_id"
				ng-change="sessionsGroupsChange(session.sessions_groups_id)">
		 <option ng-repeat="r in sessions_groups" value="{{r.id}}" >
		   {{r.sessions_datetime }} {{session.sessions_groups_id == r.id ? '' : '(' + r.thermal_profiles_label +')'  }} 
   </option> 
			</select>
			
		<br/>
		
    <p><b>Thermal Profile selector</b>
    <br/>
    Displays the thermal profile label asociated with the value selected in the previuos selector.
    <br/>
    Here it is always disabled but in real app can be enabled under some conditions.
    </p>
		<select id="thermal_profiles_id"
			name="thermal_profiles_id"
			ng-model="session.thermal_profiles_id"
			ng-disabled="true"
			ng-options="opt.id as opt.label for opt in thermal_profiles">
			<option value></option>
		</select>	
  </body>

</html>

附言。使用ng-options 角度指令总是让我感到困惑，这就是为什么我更喜欢在<option> 上使用ng-repeat。这只是让事情更容易理解。

您的应用程序中存在另一个页面/模板加载问题。请查看ngCloak。我用这个应用程序来平滑模板加载。 ngCloak 所做的是

ngCloak 指令用于阻止 Angular html 模板浏览器在其原始（未编译）中短暂显示应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

希望这对您有所帮助。

【讨论】：

我喜欢你的方法，它给了我一些想法，但有一个小功能。无论是在选择器中还是在下拉菜单中，热曲线标签对于所选值始终是隐藏的。这个想法是让它只隐藏在输入选择器中，但无论它是否是选定的值，都显示在下拉列表中。