Ich bin neu in AngularJS und versuche, ausgewählten Text und Wert von Dropdown zu erhalten. Ich folgte vielen Tutorials und konnte immer noch nicht dorthin gelangen. 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 mein erstes Element als Select a category... definiert. Warum ist das erste Element in Dropdown immer leer?
Unten ist mein Geigenbeispiel. http://jsfiddle.net/Qgmz7/136/
6 Antworten
Das liegt daran, dass Ihr Modell itemSelected den aktuellen Wert Ihrer Auswahl-Dropdown-Liste 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 verwenden, wobei sich Ihre Daten geringfügig ändern, oder Sie können normales ng-repeat verwenden, den selectedIndex abrufen und das Kategorieobjekt mithilfe dieses Index aus Ihrer Kategorieliste suchen. Hier wird der erste Ansatz vorgestellt.
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 deaktivierten Eigenschaft können Sie eine group -Eigenschaft hinzufügen, die in group by verwendet werden kann.
Hier ist eine aktualisierte Geige, um die Idee zu veranschaulichen.
Hier sehr einfacher und einfacher Code Was ich getan 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>
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>
Aktualisieren
Für einen dauerhaften Stil müssen Sie dort ng-repeat verwenden. In diesem Fall wird nur id an Ihr ng-model gebunden, und während Sie das gesamte Objekt abrufen, 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);
};
ngChange gibt nur den Wert Ihrer ausgewählten Option zurück und 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 das value Ihrer Optionen in so etwas zu ändern:
<option .... value="{{category.id}}|{{category.name}}">
... und in Ihrem eigentlichen ngChange-Handler teilen Sie 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]);
};
Eine kleine Änderung in Ihrem 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/
<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