如何从下拉列表中获取特定值答案

【问题标题】：How to get a specific value from drop-down list如何从下拉列表中获取特定值
【发布时间】：2016-09-15 22:12:43
【问题描述】：

我有以下html：

<td>
    {%verbatim%}
    <select ng-model="s_value" class="form-control">
        <option ng-repeat="s in severity_list" ng-value="s.rank" >{{s.rank}}-{{s.generic_value}}</option>
    {%endverbatim%}
    </select>
</td>

我只需要在我的表单/表格中显示排名（整数值）。但它实际上将整数和字符串值都放入字段中。我怎样才能防止这种情况，只显示整数值？有什么想法吗？提前致谢

根据我的回答，我已经用严重性列表更新了我的问题，是否因为编辑人员而有任何变化？

$scope.severity_lists = function(){
            console.log('Stage1: Loading Sods..... ');
            $http.get('{% url "severities"  %}').success(
                function(data){
                    $scope.severity_list = data['objects'];
            }).error(function(data, status){
                    console.log('Stage1: Internal error while loading initial data:'+status );
            });
        };
        $scope.severity_lists();

已编辑以向 SK 显示问题：

【问题讨论】：

标签： html angularjs drop-down-menu angularjs-ng-repeat

【解决方案1】：

你可以试试这样的。我尽量保持简单：

var app = angular.module("Demo", []);

 app.controller("AppController", function($scope) {
   $scope.severity_list = [{
     rank: 1,
     generic_value: "High"
   }, {
     rank: 2,
     generic_value: "Mid"
   }, {
     rank: 3,
     generic_value: "Low"
   }];

   $scope.getVal = function(ind) {
     if ($scope.selectedValue != undefined && $scope.selectedValue == $scope.severity_list[ind].rank) {
       $scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank;
     } else {
       $scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank + '-' + $scope.severity_list[ind].generic_value;
     }
     return $scope.severity_list[ind].viewValue;
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <select ng-model="selectedValue">
      <option value="">--Select--</option>
      <option ng-repeat="s in severity_list" value="{{s.rank}}">
        {{ getVal($index) }}</option>
    </select>
    <span ng-show="selectedValue">Selected Value: {{ selectedValue }} </span>
  </div>
</div>

JsFiddle：https://jsfiddle.net/sktajbir/6fmvsaf0/21/

由于选项标签中的此代码，此处选择的值将始终排名：

value="{{s.rank}}"

如果您想将整个对象作为选定对象，那么您可以尝试：

value="{{s}}"

我希望这将有助于您进一步思考。谢谢。

【讨论】：

嗨，Sk 究竟是什么changeVal()？
哦，对不起。首先，我想了一种使用 ng-change 的方法，但后来在没有 ng-option 的情况下达到了目的，但我忘了删除它。我已经编辑了上面的代码。谢谢。
非常感谢 SK，它成功了。但也出现了一个新问题。假设我选择值 2，然后我想选择 4；当我选择 4 时，缺少对应于 2 的 generic_value（我之前选择的）。意味着一旦我从下拉列表中选择另一个选项，我之前选择的 generic_value 总是丢失
与 Lee 提供的解决方案相同，但实施不佳。此外，由于您以后可能会遇到绑定问题，因此在选项上使用 ng-repeat 是一种不好的做法
@Sk.Tajbir - 只需阅读文档：docs.angularjs.org/api/ng/directive/ngOptions

【解决方案2】：

你真的应该使用 ng-options

编辑：阅读您的其他评论并意识到您可能想要这个

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

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

      $scope.severity_list = [{
        rank: 1,
        generic_value: 'severe'
      }, {
        rank: 2,
        generic_value: 'not so bad'
      }];

      $scope.initialiseOptions = function() {
        for (i = 0; i < $scope.severity_list.length; i++) {
          $scope.severity_list[i].Text = $scope.severity_list[i].rank + '-' + $scope.severity_list[i].generic_value;
        }
      }

      $scope.initialiseOptions();
      $scope.dropdownChanged = function() {
        if($scope.s_value){
          $scope.initialiseOptions(); // reset our previous selections         
          $scope.s_value.Text = $scope.s_value.rank;// Set our display to only rank after its chosen
        }        
      };

    });

<!DOCTYPE html>
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="MainCtrl">

  <select ng-model="s_value" class="form-control" ng-options="option as option.Text for option in severity_list" ng-change="dropdownChanged()">
  </select>

  Selected:{{s_value}}

</body>

</html>

【讨论】：

【解决方案3】：

在查看了 cmets 之后，我可以提出以下建议吗？

它并不出色，但它展示了一种方法，这里是小提琴：

http://jsfiddle.net/LXAt7/573/

<select ng-model="s_value" class="form-control" ng-hide="!editMode" ng-options="s.rank as (s.rank + ' - ' + s.generic_value) for s in severity_list" ng-change="valueChanged()"> </select> <input type="text" ng-model="s_value" ng-show="!editMode" ng-click="changeToEditMode()" />

值得注意的是，使用ng-options 是一种更简洁的方法。 - https://docs.angularjs.org/api/ng/directive/ngOptions

我不熟悉这个逐字标记，但它似乎不合适，它应该不在</select>下方吗？

【讨论】：

Daniel，我想将排名和 generic_value 都显示为下拉菜单（例如：1-High），但是一旦用户选择该选项，我只想在字段中显示排名跨度>
听起来很奇怪，所以当你点击下拉菜单时，它会显示与选择后不同的数据？
当我点击下拉菜单时 --> 显示排名和通用值
点击下拉菜单后 --> 我想在输入框中显示的值必须是排名
一种选择是在下拉菜单旁边显示带有 s_value 的输入文本，并且仅在它有值时才显示它？也许隐藏下拉菜单时它确实有一个值并有一个编辑按钮来更改值？