it-swarm.com.de

AngularJS: Entfernen Sie die leere Auswahloption in Winkelwiederholung

Ich verwende ng-repeat, um Optionen mit unterschiedlichen Werten und Text zu rendern, und setze auch die Standardeinstellung ein. 

<select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

Jetzt ist die aktive Option ausgewählt, aber die leere Option wird noch gerendert.

13
devo

Versuchen Sie stattdessen ng-options:

<select ng-model="selectedFinancial" ng-options="c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

Sie sollten Ihr Modell so umgestalten, dass es ng-options verwendet. Wenn wir <select> verwenden, ist nur 1 ausgewähltes Element, und dieses Element sollte eine Eigenschaft von $scope sein, die auf ein Element in der Liste verweist => Wir müssen keine weitere Eigenschaft mit "active" und "inactive" für alle Objekte duplizieren.

Ihr aktueller Modellentwurf ist sinnvoll, wenn mehr als ein Element ausgewählt ist. Wenn es mehr als ein Objekt gibt, sollten Sie anstelle von <select> eine Liste mit Kontrollkästchen verwenden.

Wenn Sie sich mit der ID binden möchten, versuchen Sie Folgendes:

<select ng-model="selectedFinancialId" ng-options="c.id as c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

9
Khanh TO

Die leere Option wird generiert, wenn ein von ng-model referenzierter Wert nicht in einer Reihe von Optionen vorhanden ist, die an ng-options übergeben werden.

Die vollständige Antwort und ein Beispiel finden Sie unter stackoverflow. hier ist der link

UPDATE:

hier ist ein Beispiel:

 <select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

im Controller:

$scope.newItem={};
$scope.account_year=[{id:1,financial_year:"2013-2014",status:"Active"},
                     {id:2,financial_year:"2014-2015",status:"Inactive"}] 
//remove empty option
$scope.newItem.financial_year_id=$scope.account_year[0].id;

live-Beispiel: http://jsfiddle.net/choroshin/5YDJW/7/

19
Alex Choroshin

Ng-Option ist auch ein guter Weg. Aber wenn Sie wirklich ng-repeat wollen, dann verwenden Sie das so. 

  $scope.newItem.financial_year_id=" ";

Initialisieren Sie die Variable, wenn Sie den Controller starten. Wenn Sie es nicht initialisieren, gilt es als undefiniert. Der erste leere Wert ist also vorhanden. 

0
Anbu