Question

下拉列表的第一个元素在AngularJs中加载空白，当我从下拉列表中选择时，删除了空白元素。我想在下拉列表的负载处删除该空白元素。

代码：

<select class="form-control" ng-model="myModel" ng-if="c.length==1" id="SRQ" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
</select>

<select class="form-control" ng-model="myModel" ng-if="c.length==2" id="SRQ1" ng-change="change(myModel)" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
  <option value="2">Secondary</option>
</select>

<select class="form-control" ng-model="myModel" ng-if="c.length==3" id="SRQ2" ng-change="change(myModel)" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
  <option value="2">Secondary</option>
  <option value="3">Tertiary</option>
</select>

请帮忙，

由于

Answer 1

我认为您可以使用tutorial 指令简化代码，并根据特定变量显示项目，您可以创建自定义过滤器。看一下这个例子：

(function() {
  'use strict';
  
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl)
    .filter('customFilter', customFilter);

  function mainCtrl() {
    var vm = this;
    
    vm.options = [{
      'label': 'Primary',
      'value': '1'
    }, {
      'label': 'Secondary',
      'value': '2'
    }, {
      'label': 'Tertiary',
      'value': '3'
    }];
    vm.maxSize = '1';
    vm.myModel = '';
  }
  
  function customFilter() {
    return function(items, maxSize) {
      if (!items || items.length === 0) return;
      
      return items.slice(0, maxSize);
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0-rc.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
</head>

<body ng-controller="mainCtrl as $ctrl">
  <div>No. of options to display:</div>
  <div class="radio text-center" ng-repeat="n in [1, 2, 3]">
    <label>
      <input type="radio" name="item" value="{{n}}" ng-model="$ctrl.maxSize">{{n}}
    </label>
  </div>
  <div>
    <select class="form-control" ng-options="option.value as option.label for option in $ctrl.options | customFilter: $ctrl.maxSize" ng-model="$ctrl.myModel">
      <option value="" hidden>[Select One]</option>
      <option label="{{option.label}}"></option>
    </select>
  </div>
</body>

</html>

作为建议，我建议您遵循此Click here to view screenshot。

Answer 2

 <select class="form-control" ng-model="myModel" ng-if="c.length==2" id="SRQ1" ng-change="change(myModel)" required> <option value="" ng-hide="!myModel" selected>[Select One]</option>

1.首先选择[select One]，因为myModel是[selectOne]

2.在分配myModel时，默认选项将在下拉列表中处于隐藏模式。

下拉列表的第一个元素在AngularJs中加载空白

2 个答案: