ドロップダウンの最初の要素は、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ディレクティブを使用してコードを簡素化することができると思いと特定の変数に基づいてアイテムを表示するには、カスタムフィルタを作成することができます。私はこの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>

：この例を見てみましょう。

最初

出典

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 [一つを選択]に、mymodelは[selectOne]であるとして選択されている

2.Asに、mymodelは、デフォルトのオプションがドロップダウンリストに隠されたモードになりますが割り当てられます。

出典

2016-11-26 19:06:05 Shashikanth

ドロップダウンの最初の要素は、AngularJsで空白をロードします

答えて

関連する問題