Angularjs 下拉列表更改所选文本和值
Angularjs Dropdown OnChange Selected Text and Value
我是AngularJS
新手,并试图从Dropdown
获取选定的文本和值。我遵循了很多教程,但仍然无法到达那里。 SelectedValue
和SelectedText
总是undefined
.下面是我的代码:
目录:
<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...
然后为什么下拉列表中的第一项总是空的。
下面是我的小提琴样本。http://jsfiddle.net/Qgmz7/136/
,您的模型itemSelected
捕获了选择下拉列表的当前值,该值只不过是option
元素的value
属性。你有
<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
,获取选定的索引并使用该索引从类别列表中查找类别对象。在这里展示第一种方法。
.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 by
中使用的 group
属性,而不是禁用属性。
这里有一个更新的小提琴来说明这个想法。
使用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);
};
更新的小提琴
<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
对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/
ngChange
只返回所选选项的值,这就是您无法获取整个数据的原因。
这是一个无需更改标记逻辑的有效解决方案。
标记:
<select
name="category-group"
id="categoryGroup"
class="form-control"
ng-model="id"
ng-change="onCategoryChange(id)">
ng更改处理程序:
$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]);
};
这里非常简单易用的代码 我做了什么
<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>
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何在剑道下拉列表中按文本和值搜索
- 如何在ReactJs中链接下拉列表和文本区域
- 使用 jQuery 从下拉列表中获取所选文本
- 根据用户从下拉列表中的选择显示多个文本框
- 使用两个下拉列表的值填充文本框
- 如果没有从下拉列表中选择任何值,则允许使用php、mysql、javascript将文本框添加到mysql表中
- 将文本框/单选按钮/和下拉列表中的信息添加到dataTable
- angularjs文本区域-如何使其与angularjs下拉列表中的选定值保持同步
- 如何删除下拉列表中的部分文本
- 将数量文本框转换为下拉列表
- 从下拉列表中选择其他选项时激活文本框
- 禁用基于下拉列表选择 asp.net JavaScript 启用文本框
- 根据下拉列表中的选定值启用文本框
- 有角度的自动建议文本排版和html ul li下拉列表
- 将Wooccommerce属性下拉列表转换为可点击文本
- 如何在选择下拉列表值的文本框中获取值
- 如何使用文本下拉列表中的绑定值来执行计算
- 默认文本下拉列表jquery
- 如何绑定到文本下拉列表