web-dev-qa-db-fra.com

Angularjs Dropdown OnChange Texte et valeur sélectionnés

Je suis nouveau sur AngularJS et j'essaie d'obtenir le texte et la valeur sélectionnés de Dropdown. J'ai suivi beaucoup de tutoriels avec toujours impossible d'y arriver. SelectedValue et SelectedText sont toujours undefined. Ci-dessous mon code:

Html:

<div ng-app="SelectApp">
<div ng-controller="selectController">
    <select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)">
        <option value="0">Select a category...</option>
        <option ng-repeat="category in categories" value="{{category.id}}"
             ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}">
             {{category.name}}
        </option>
     </select>
</div>

Js:

'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {

$scope.categories = [       
   { id: 1, name: "- Vehicles -", disabled: true },
   { id: 2, name: "Cars" },
   { id: 3, name: "Commercial vehicles", disabled: false },
   { id: 4, name: "Motorcycles", disabled: false },
   { id: 5, name: "Car & Motorcycle Equipment", disabled: false },
   { id: 6, name: "Boats", disabled: false },
   { id: 7, name: "Other Vehicles", disabled: false },
   { id: 8, name: "- House and Children -", disabled: true },
   { id: 9, name: "Appliances", disabled: false },
   { id: 10, name: "Inside", disabled: false },
   { id: 11, name: "Games and Clothing", disabled: false },
   { id: 12, name: "Garden", disabled: false }
];

$scope.onCategoryChange = function () {

    $window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);

};
}]);

Et encore une chose, j'ai défini mon premier élément comme étant Select a category... puis Pourquoi le premier élément dans le menu déroulant est toujours vide. 

Ci-dessous, mon échantillon de violon . http://jsfiddle.net/Qgmz7/136/

javascriptjqueryhtmlangularjsangularjs-ng-options
6
Usman Khalid

En effet, votre modèle itemSelected capture la valeur actuelle de votre liste déroulante de sélection, qui n’est autre que l’attribut value de votre élément option. Tu as 

<option ng-repeat="category in categories" value="{{category.id}}">

dans votre code, donc dans la version rendue, vous aurez 

<option ng-repeat="category in categories" value="0">

mais vous vous attendez à ce que itemSelected soit votre objet de catégorie et toute tentative d'interrogation de id ou d'une autre propriété retournera undefined.

Vous pouvez utiliser ng-options avec group by avec un peu de modification de vos données ou vous pouvez utiliser ng-repeat normal, obtenir le selectedIndex et rechercher l'objet catégorie de votre liste de catégories à l'aide de cet index. Présentant la première approche ici.

HTML

<select name="category-group" id="categoryGroup" 
        ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" 
        ng-options="category.name group by category.group for category in categories">
</select>

Données mises à jour

$scope.categories = [
       { id: 0, name: "Select a category..."},
       { id: 1, name: "Cars", group : "- Vehicles -" },
       { id: 2, name: "Commercial vehicles", group : "- Vehicles -" },
       { id: 3, name: "Motorcycles", group : "- Vehicles -" }
 ];

 $scope.itemSelected = $scope.categories[0];

Au lieu d'une propriété désactivée, vous pouvez ajouter une propriété group pouvant être utilisée dans group by.

Voici une mise à jour Fiddle pour illustrer l'idée.

10
Arkantos

Vous devez utiliser ng-options pour définir l'objet sur votre valeur ng-model lors de la modification de vos options de sélection.

Balisage

<select name="category-group" id="categoryGroup" class="form-control" 
  ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" 
  ng-options="category.name for category in categories">
    <option value="0">Select a category...</option>
</select>

Fiddle Ici

Mettre à jour

Pour conserver le style, vous devez utiliser ng-repeat dans ce cas. Dans ce cas, vous n'aurez que id lié à votre ng-model et lors de la récupération de tout l'objet, vous devez filtrer vos données.

$scope.onCategoryChange = function () {
    var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
    $window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);
};

Mise à jour Fiddle

6
Pankaj Parkar
<div ng-app="SelectApp">
    <div ng-controller="selectController">
    <select ng-change='onCategoryChange()' ng-model="itemSelected" ng-options="category.name for category in categories">
        <option value="">-- category --</option>
    </select>
</div>

// http://jsbin.com/zajipe/edit?html,js,output

3
Jean Troiani

Un petit changement dans votre onCategoryChange() devrait fonctionner:

$scope.onCategoryChange = function () {
        $window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected -1].name);

    };

JSFiddle: http://jsfiddle.net/Qgmz7/144/

3
ArBro

ngChange ne renvoie que la valeur de l'option sélectionnée et c'est pourquoi vous n'obtenez pas l'intégralité des données.

Voici une solution de travail sans changer votre logique de balisage. 

Balisage: 

<select
    name="category-group"
    id="categoryGroup"
    class="form-control"
    ng-model="id"     
    ng-change="onCategoryChange(id)">

Gestionnaire ngChange: 

 $scope.onCategoryChange = function (id) {
        //get selected item data from categories
        var selectedIndex = $scope.categories.map(function(obj) { return obj.id; }).indexOf( parseInt(id) );
        var itemSelected = $scope.categories[selectedIndex];

        $window.alert("Selected Value: " + itemSelected.id + "\nSelected Text: " + itemSelected.name);

    };

Une autre solution (un peu sale) serait de ne changer que la value de vos options en quelque chose comme ceci:

<option .... value="{{category.id}}|{{category.name}}">

... et dans votre gestionnaire ngChange actuel, divisez la valeur pour obtenir toutes les valeurs sous forme de tableau:

$scope.onCategoryChange = function (itemSelected) {
    $scope.itemSelected = itemSelected.split('|'); //string value to array
    $window.alert("Selected Value: " + $scope.itemSelected[0] + "\nSelected Text: " + $scope.itemSelected[1]);

};
1
tbutcaru

Voici un code très simple et facile Ce que j'ai fait 

<div ng-app="myApp" ng-controller="myCtrl">
Select Person: 
<select ng-model="selectedData">
   <option ng-repeat="person in persons" value={{person.age}}>
         {{person.name}}
   </option>
</select>
<div ng-bind="selectedData">AGE:</DIV>
<br>
</div>


    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',myCtrlFn);
    function myCtrlFn($scope) {

    $scope.persons =[
        {'name': 'Prabu','age': 20},
        {'name': 'Ram','age': 24},
        {'name': 'S','age': 14},
        {'name': 'P','age': 15}
        ];
    }
    </script>
0
Praburam S