Entfernen Sie ein leeres Element aus der Dropdown-Liste angularjs

Ich versuche, Daten zu binden, Dropdown-Menü mit AngularJS ng-Repeat-Direktive auswählen, aber es zeigt leere Daten beim Laden der Seite. So entfernen Sie den leeren Artikel Hier ist der Code:Entfernen Sie ein leeres Element aus der Dropdown-Liste angularjs

<html> 
    <head> 
    </head> 
    <body ng-app="app"> 
    <div ng-controller="homeCtrl"> 
     <select ng-model="selected"> 
     <option ng-repeat="item in items" value="{{item.id}}"> 
      {{item.name}} 
     </option> 
     </select> 
     <span> 
     {{selected}} 
     </span> 
    </div> 
    </body> 
</html>

Hier ist der JS-Code:

var app = angular.module('app',[]); 
      app.controller('homeCtrl',['$scope',function($scope){ 
       $scope.selected = 1; 
       $scope.items=[ 
        {name: 'harry111',id:1}, 
        {name: 'rimmi',id:2} 
       ]; 

      }]);

Hier ist ein DEMO

Quelle

2017-06-28 iJade

Blick auf die Antwort geschrieben werden. Das ist was du brauchst. –

Die Antwort ist einfach und veröffentlicht von @SrinivasML, aber besser verwenden Sie ng-Optionen stattdessen als eine gute Praxis. –

machen $scope.selected = 1; als $scope.selected = "1"; sie einen Wert auswählen Standard wird

var app = angular.module('app',[]); 
 
\t \t \t app.controller('homeCtrl',['$scope',function($scope){ 
 
\t \t \t \t $scope.selected = "1"; 
 
\t \t \t \t $scope.items=[ 
 
\t \t \t \t \t {name: 'harry111',id:1}, 
 
\t \t \t \t \t {name: 'rimmi',id:2} 
 
\t \t \t \t ]; 
 
     
 
     
 
      
 
     
 
\t \t \t \t 
 
\t \t \t }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
     <select ng-model="selected"> 
 
     <option ng-repeat="item in items" value="{{item.id}}"> 
 
      {{item.name}} 
 
     </option> 
 
     </select> 
 
     <span> 
 
     {{selected}} 
 
     </span> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-06-28 10:33:20

warum "1" und nicht 1? – iJade

Ich bin auf der Suche nach diesem Problem, ich hatte dieses Problem einmal konfrontiert, wenn in Zeichenfolge umgewandelt wurde, die ausgewählt wurde, SO Fragen zu überprüfen, um Referenz hinzuzufügen –

Sie müssen umfassen ng-repeat auf <select> Tag wie folgt

<html> 
    <head> 
    </head> 
    <body ng-app="app"> 
    <div ng-controller="homeCtrl"> 
     <select ng-model="selected" ng-options="value.id as value.name 
              for (key,value) in items" 
    ></select> 
     <span> 
     {{selected}} 
     </span> 
    </div> 
    </body> 
</html>

Dies wird nicht die blan hinzufügen k Option im Dropdown-Menü auswählen. Hier ist die Arbeits CODEPEN

Quelle

2017-06-28 10:29:56

aber ich sehe nicht ng -repeat – iJade

Sehen Sie, dass gibt es ng-Option, die über die Elemente Array iteriert. –

Verwendung ng-Optionen stattdessen

ng-options="value.id as value.name for (key,value) in items"

DEMO

var app = angular.module('app',[]); 
 
\t \t \t app.controller('homeCtrl',['$scope',function($scope){ 
 
    \t \t $scope.items=[ 
 
\t \t \t \t \t {name: 'harry111',id:1}, 
 
\t \t \t \t \t {name: 'rimmi',id:2} 
 
\t \t \t \t ]; 
 
\t \t \t \t $scope.selected = $scope.items[0].id; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
    <select ng-model="selected" ng-options="value.id as value.name 
 
              for (key,value) in items" 
 
    ></select> 
 
     <span> 
 
     {{selected}} 
 
     </span> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-06-28 10:31:47 Sajeetharan

Entfernen Sie ein leeres Element aus der Dropdown-Liste angularjs

Antwort

Verwandte Themen