Angularjs Dropdown OnChange选定的文本和值

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.

这是一个更新的小提琴来说明这个想法.

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>

在这里小提琴

更新

对于持久化样式,你必须在ng-repeat那里使用,在这种情况下,你只会id绑定到你的,ng-model并且在检索整个对象时,你需要过滤你的数据.

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

更新小提琴