2016-02-09 10 views
7

Próbuję ustawić domyślną wartość opcji Używam select i ng-repeat. Dostaję dane w pliku js i wykonuję model wywołania, aby ustawić tam wartość.ng-selected nie działa z ng-repeat, aby ustawić wartość domyślną

Proszę spojrzeć na poniższy kod: Plik

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ngrepeat-select-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> 
    <script src="app.js"></script> 



</head> 
<body ng-app="ngrepeatSelect"> 
    <div ng-controller="ExampleController"> 
    <form name="myForm"> 
    <label for="repeatSelect"> Repeat select: </label> 
    <select ng-model="datamodel"> 
     <option ng-repeat="dataitem in data" 
       ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option> 
    </select> 
    </form> 
    <hr> 
    <tt>repeatSelect = {{datamodel}}</tt><br/> 
</div> 
</body> 
</html> 

app.js

(function(angular) { 
    'use strict'; 
angular.module('ngrepeatSelect', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = [1,2,3,4,5]; 

    $scope.datamodel = 2; 
}]); 
})(window.angular); 

Oto moja plunker

Odpowiedz

9

Z angular docs:

Należy pamiętać, że wartość dyrektywy select używanej bez ngOptions jest zawsze ciągiem. Jeśli model musi być powiązany z nie-ciągłą wartością , musisz albo jawnie przekonwertować ją za pomocą dyrektywy (zobacz przykład poniżej poniżej) lub użyć polecenia ngOptions, aby określić zestaw opcji. Jest to , ponieważ element opcji może być powiązany tylko z wartościami ciągów o wartości obecnej.

Tak zmienia się $scope.datamodel = 2; na $scope.datamodel = '2'; działa. Zobacz zaktualizowaną wersję plunker.

Zamiast tego lepiej użyć zamiast tego ngOptions. Ponownie, z dokumentów:

W wielu przypadkach ngRepeat można stosować w <option> elementów zamiast ngOptions aby uzyskać podobny rezultat. Jednak ngOptions zapewnia niektóre korzyści, takie jak większa elastyczność w zakresie, w jaki model <select> jest przypisany poprzez wybór jako część wyrażenia ze zrozumieniem, a także w zmniejszaniu pamięci i zwiększaniu prędkości poprzez nie tworzenie nowego zakresu dla każdego z nich. powtarzana instancja.

Tak, aby zachować swój model jako liczba całkowita, można raczej użyć:

<select ng-model="datamodel" ng-options="dataitem for dataitem in data"> 
    <option value="">Please Select</option> 
</select> 

Zobacz plunker

+0

To działa! Niesamowite ! Właśnie przeliczam liczbę całkowitą na łańcuch i cały zestaw. – FShah

+0

Próbuję ustawić maksymalną liczbę jako wartość domyślną, ale nie z pliku .js, więc używam ng-repeat. tutaj jest Link: (http://plnkr.co/edit/zJbQTVPaErP2dKe5gUXv?p=preview) – FShah

+0

@FShah myślę, że nadal możesz używać 'ng-options', czy możesz rozwidlić swojego plunkera, aby pokazać, co masz na myśli? Możesz ewentualnie użyć 'ng-init', aby ustawić wartość swojego modelu na ostatni element na liście, jeśli lista jest posortowana od min. Do maks. – user2718281

Powiązane problemy