Question

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

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

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

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

import os.path

config['g7']['append_dir_to_filename'] = 1; 
config['g7']['device_name'] = 'Canon-G7';
config['g7']['raw_file'] = array('cr2', 'jpg', 'mp4');   
config['d5']['append_dir_to_filename'] = 1; 
config['d5']['device_name'] = 'Nikon-D5';
config['d5']['raw_file'] = array('nef', 'jpg', 'avi');
config['a9']['append_dir_to_filename'] = 1; 
config['a9']['device_name'] = 'Sony-alpha-a9';
config['a9']['raw_file'] = array('mp4', 'jpg', 'avi');

def createDir(path):
    if not os.path.exists(path):
        os.mkdir(path)

dirs_name = os.listdir(cwd)
for dir_name in dirs_name:
    for key_word in config:
        if dir_name.endswith(key_word):
            _raw_files = os.path.join(cwd, dir_name, r'_raw_files')
            _sup_files = os.path.join(cwd, dir_name, r'_sup_files')
            createDir(_raw_files)
            createDir(_sup_files)

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

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

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

注意：AngularJS 1.5.0

Answer 1

我认为针对您的问题的最佳解决方案是在ng-options中添加“ group by thermal_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/

Answer 2

Ternary conditions非常有用，可以解决这些问题。为了解决您的需求，我使用了相同的方法（ternary conditions）。这里发生的是每当选择一个值时，您可以保存该id值的selected，然后根据该id是否hide做出决定或show标签。

这是完整的代码。

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角度指令对我来说总是令人困惑，这就是为什么我更喜欢在ng-repeat上使用<option>。这让事情变得更容易理解。

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

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

希望这有用。

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

2 个答案: