Question

我是AngularJS的新手并尝试从Dropdown获取选定的文字和值。我跟着很多教程仍然无法到达那里。 SelectedValue和SelectedText始终为undefined。以下是我的代码：

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

};
}]);

还有一件事，我已将我的第一项定义为Select a category...然后为什么Dropdown中的第一项始终为空。

以下是我的小提琴样本。 http://jsfiddle.net/Qgmz7/136/

Answer 1

这是因为，您的模型itemSelected会捕获您的选择下拉列表的当前值，这只是value元素的option属性。

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

在您的代码中，因此在呈现的版本中，您将获得

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

但您希望itemSelected成为您的类别对象，任何查询id或其他属性的尝试都将返回undefined。

您可以ng-options使用group by对数据进行一些更改，或者您可以使用普通ng-repeat，获取selectedIndex并使用该类别列表查找类别对象指数。在这里展示第一种方法。

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

更新数据

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

您可以添加可在group中使用的group by属性，而不是已停用的属性。

这里有一个更新的Fiddle来说明这个想法。

Answer 2

您应该使用ng-options在更改选择选项时将对象设置为ng-model值。

<强>标记

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

<强>更新

对于持久样式，您必须使用ng-repeat，在这种情况下，您只需id绑定到ng-model，并且在检索整个对象时，您需要过滤数据。< / p>

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

Updated Fiddle

Answer 3

<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

Answer 4

onCategoryChange()的一点变化应该有效：

$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/

Answer 5

ngChange仅返回所选选项的值，这就是您无法获取整个数据的原因。

这是一个有效的解决方案，无需更改标记逻辑。

<强>标记：

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

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

    };

另一个解决方案（有点脏）只会将您的选项的value更改为以下内容：

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

...在实际的ngChange处理程序中，只需将值拆分以将所有值作为数组获取：

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

};

Answer 6

这里非常简单易用的代码我做了什么

class Car {
    /*+-----+     +-------+
      | Car |<>---| Brand |
      +-----+     +-------+*/
    private Brand brand;

    /*+-----+ 1 1 +-------+
      | Car |◆----| Brand |
      +-----+     +-------+*/
    /*Understood as composition (black diamond operator).
      That means if there is no car there can't be a gearbox (inside of the car).*/
    private Gearbox gearbox;

    private String color;
    private int weight;
    private Brand brand_name;
}


class Brand {
    /*+-------+  1    1..n +----------+
      | Brand |<>----------| Location |
      +-------+            +----------+*/
    List<Location> locations; //at least one location

    private String Skoda;
    private String BMW;
    private Location location;
}

class Location {
    private String US;
    private String EU;
}

class Gearbox {
    enmu Gearbox {
    automatic, manual
    }
}

Angularjs Dropdown OnChange选定的文本和值

6 个答案: