webentwicklung-frage-antwort-db.com.de

Angularjs Dropdown OnChange Ausgewählter Text und Wert

Ich bin neu in AngularJS und versuche, Selected Text and Value von Dropdown zu erhalten. Ich habe viele Tutorials mitverfolgt, die noch nicht dorthin gekommen sind. SelectedValue und SelectedText sind immer undefined. Unten ist mein 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);

};
}]);

Und noch etwas, ich habe meinen ersten Artikel als Select a category... definiert, dann ist der erste Artikel in Dropdown immer leer. 

Unten ist meine Geigenprobe . http://jsfiddle.net/Qgmz7/136/

6
Usman Khalid

Das liegt daran, dass Ihr Modell itemSelected den aktuellen Wert Ihrer Auswahlliste erfasst, der nichts anderes als das value-Attribut Ihres option-Elements ist. Du hast 

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

in Ihrem Code, also in der gerenderten Version, erhalten Sie 

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

sie erwarten jedoch, dass itemSelected Ihr Kategorieobjekt ist, und jeder Versuch, id oder eine andere Eigenschaft abzufragen, gibt undefined zurück.

Sie können ng-options mit group by mit ein wenig Änderung Ihrer Daten verwenden, oder Sie können den normalen ng-repeat verwenden, den selectedIndex abrufen und das Kategorieobjekt aus Ihrer Kategorienliste anhand dieses Index suchen. Hier wird der erste Ansatz gezeigt.

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>

Aktualisierte Daten

$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];

Anstelle der Eigenschaft disabled können Sie eine group -Eigenschaft hinzufügen, die in group by verwendet werden kann.

Hier 'ein aktualisiertes Fiddle um die Idee zu veranschaulichen.

10
Arkantos

Sie sollten ng-options verwenden, um das Objekt bei Änderung Ihrer Auswahloptionen auf Ihren ng-model-Wert zu setzen.

Markup

<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 hier

Update

Für den persistenten Stil müssen Sie dort ng-repeat verwenden. In diesem Fall müssen Sie nur id an Ihren ng-model gebunden haben. Beim Abrufen des gesamten Objekts müssen Sie Ihre Daten filtern.

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

Aktualisiert 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

Eine kleine Änderung in Ihrer onCategoryChange() sollte funktionieren:

$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 gibt nur den Wert der ausgewählten Option zurück. Deshalb erhalten Sie nicht die gesamten Daten.

Hier ist eine funktionierende Lösung, ohne Ihre Markup-Logik zu ändern. 

Markup:

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

ngChange-Handler:

 $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);

    };

Eine andere Lösung (etwas schmutzig) wäre, nur die value Ihrer Optionen in etwas zu ändern:

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

... und teilen Sie in Ihrem tatsächlichen ngChange-Handler einfach den Wert, um alle Werte als Array zu erhalten:

$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

Hier sehr einfacher und einfacher Code Was ich gemacht habe 

<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