web-dev-qa-db-fra.com

Impossible de définir la valeur sélectionnée de DropDown dans angularJs

J'ai un DropDown. Je lie sa valeur en utilisant ng-repeat sur Option. Je souhaite définir la valeur sélectionnée à l'aide du champ de valeur uniquement.

Ceci est mon code. 

<div ng-controller="myCtrl">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" value="{{sel.value}}">{{sel.label}}</option>
    </select>
    <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

Js 

angular.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that's used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})

Mon Fiddle

Comme vous pouvez le constater, je souhaite définir la valeur sélectionnée en définissant uniquement Valeur.

javascriptjqueryangularjs
11
Amit Kumar

Vous devez utiliser ng-model au lieu de ng-value pour le lier au modèle.

<select ng-model="selectedItemvalue">

Mise à jour: $scope.selectedItem doit être $scope.selectedItemvalue dans le contrôleur, puis vous pouvez utiliser ng-selected pour y faire correspondre la condition.

Démo de travail 

angular
.module('myApp', [])

// controller here
.controller('myCtrl', function($scope) {
    $scope.selectables = [
        { label: 'A', value: 1},
        { label:'B', value: 2},
        { label: 'C', value: 3}
    ];

    // this is the model that's used for the data binding in the select directive
    // the default selected item
    //using value, i want to set the selected value
    $scope.selectedItemvalue = "2"; 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <select ng-model="selectedItemvalue">
        <option value="">--Select --</option>
        <option ng-repeat="sel in selectables" ng-selected="selectedItemvalue == sel.value" value="{{sel.value}}">{{sel.label}}</option>
    </select>
 <p>Selected Value is : {{selectedItemvalue}}</p>
</div>

18
A.B

Vous devez utiliser essentiellement la syntaxe suivante pour votre balise option (utilisez ng-selected):

<option ng-repeat="sel in selectables" value="{{sel.value}}" ng-selected="sel.value == selectedItemvalue">{{sel.label}}</option>
4
Shashank Agrawal

Si tu essayes

$ scope.selectedItemvalue = {label: 'B', valeur: 2}; 

alors ça va marcher.

0
Ankit Gupta