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

下拉的第一个元素在AngularJs中加载空白，当我从下拉列表中选择空白元素时将被删除。我想在下拉列表中删除那个空白元素。下拉的第一个元素在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>

请帮帮忙，

感谢

来源

2016-11-25 rahul aggarwal

使用ng-init =“myModel = -1”而不是选定的属性 – Vanojx1

能否请您详细说明我是angularJS –

@ Vanojx1的新手，不应使用ng-init，除非您使用ng -repeat'。 – developer033

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

(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>

作为一个建议，我建议你遵循这个tutorial。

来源

2016-11-25 15:16:13 developer033

<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.At第一[选择One]选择为基于myModel是[selectOne]

2.As的基于myModel分配默认选项将会在下拉列表中隐藏模式。

来源

2016-11-26 19:06:05 Shashikanth

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

回答

相关问题