基本上,我正在尝试填充选择框,但从first_name列和last_name列连接值.
我想做什么(不起作用):
<select ng-model="buyers" ng-options="b.id as (b.first_name + " " + b.last_name) for b in buyers"></select>
什么工作:
<select ng-model="buyers" ng-options="b.id as b.first_name for b in buyers"></select>
我正在尝试使用ng-options和a <select>将数字整数值绑定到相应选项的列表.在我的控制器中,我有这样的事情:
myApp.controller('MyCtrl', function() {
var self = this;
var unitOptionsFromServer = {
2: "mA",
3: "A",
4: "mV",
5: "V",
6: "W",
7: "kW"
};
self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
return { id: key, text: unitOptionsFromServer[key] };
});
self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});
HTML:
<div ng-controller="MyCtrl as ctrl">
<div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>
这里有一个jsFiddle演示了这个问题,以及我采取的一些其他方法,但我并不满意.
正在使用空值初始化select选项,而不是在此示例中预期的"mV".如果您选择其他选项 - selectedUnitOrdinal正确更新,绑定似乎工作正常.
我注意到如果你将初始模型值设置为字符串而不是数字,那么初始选择就可以了(参见小提琴中的#3).
我真的希望ng-options能够很好地使用数字选项值.我怎样才能优雅地实现这一目标？
我的ngModel在选择未显示为已选中时出现问题.id和name都匹配但不起作用,请参阅selectedState.将模型指向options数组中的实际对象,请参阅selelectedState2.不知道发生了什么......
小提琴:http: //jsfiddle.net/fedorsmirnoff/b49n4Ldp/2/
<select ng-model="selectedState" ng-options="state.name for state in stateOptions"></select>
<select ng-model="selectedState2" ng-options="state.name for state in stateOptions"></select>
function MainCtrl($scope) {
$scope.stateOptions = [
{id: 1, name: "Alaska"},
{id: 2, name: "Montana"},
{id: 3, name: "Nebraska"},
{id: 4, name: "Texas"}
]
$scope.selectedState = {id: 2, name: "Montana"};
$scope.selectedState2 = $scope.stateOptions[1];
}
javascript angularjs angularjs-ng-options angularjs-ng-model
我写了一个Angular应用程序的概念验证概念,允许一个人投票给美国总统.
<!DOCTYPE html>
<html ng-app="ElectionApp"">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var ElectionApp = angular.module("ElectionApp", []);
var ElectionController = ElectionApp.controller("ElectionController", [function () {
// Pretend that this data came from an outside data-source.
this.candidates = {
"14837ac3-5c45-4e07-8f12-5771f417ca4c": {
name: "Alice",
gender: "female"
},"333eb217-c8d1-4b94-91a4-22a3770bbb22": {
name: "Bob",
gender: "male"
}
};
this.vote = function () {
// TODO: Record the user's vote.
};
}]);
</script>
</head>
<body ng-controller="ElectionController as ctrl">
Who would you like to elect President? <br />
<select
ng-model="ctrl.selection"
ng-options="person …我正在尝试填充下拉选择选项列表,并使用ng-model和ng-options设置默认选定值.
我在视图中有以下代码:
<select ng-model="thisTour.site" ng-options="site.name for site in siteList"></select>
在我的控制器中:
$scope.siteList = [
{ id: 1, name: 'cycling'},
{ id: 2, name: 'walking'},
{ id: 3, name: 'holidays'}
]
$scope.thisTour.site = { id: 2, name: 'walking'};
该列表正在填充来自siteList对象的正确3个选项,但是默认情况下并不是按照我的预期选择行走？为什么不？
现在,当我改变这个:
$scope.thisTour.site = { id: 2, name: 'walking'};
对此:
$scope.thisTour.site = $scope.siteList[1];
现在它有效.为什么？这不是一回事吗？
给定一个加载了产品选项的选择列表,我希望标签采用选项名称的格式,然后在括号中定价.例如:"产品选项B($ 1,432.12)".我的选项对象具有"名称"和"价格"属性.价格是数字,我想用货币过滤器格式化.我该怎么做？我想也许是一个带字符串和数值的自定义过滤器.只是不确定我如何能够在ng-options中应用过滤器.
以下代码只显示名称(不是价格):
<select class="form-control"
ng-model="selectedOption"
ng-options="option.name for option in category.options"></select>
我目前正在开发Angular中的应用程序.到目前为止,一切都很顺利.对于棱角分明,我真的非常非常新,我很惊讶第一个真正的障碍花了这么长时间.
情况:
我有一个对象数组,每个对象都有一个订单.
category.items = [{id: 1, order: 1, type: {}, ...}, {id: 54, order: 2, type: {}, ...}, {id: 3, order: 3, type: {}, ...}]
用户需要能够重新排列这些项目.必须将新订单设置为对象属性"订单".
在html中,这些对象的呈现方式如下:
<div class="category">
<div class="item" ng-repeat="(itemIndex, item) in category.items track by $index">
<div class="header">
</div>
</div>
</div>
在header-div中我有一个输入字段,类型为select.
<select ng-model="item.order" ng-change="changeItemOrder((itemIndex + 1), item.order, itemIndex)">
<option ng-repeat="item in category.items" ng-value="($index + 1)">{{$index + 1}}</option>
</select>
changeItemOrder的代码:
$scope.changeItemOrder = function(old_order, new_order, item_index) {
new_order = parseInt(new_order);
if (old_order != new_order) {
var …javascript angularjs ng-options angular-ngmodel angularjs-ng-options
我希望能解决三个问题......
在我的应用页面中,我有一个选择状态,另一个选择县.对于我所拥有的州:
<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>
数据:
[
{ state="California", stateID="5"},
{ state="Arizona", stateID="3"},
{ state="Oregon", stateID="38"},
{ state="Texas", stateID="44"},
{ state="Utah", stateID="45"},
{ state="Nevada", stateID="29"}
]
对于我的县选择我有:
<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
</select>
数据:
[
{ county="Orange", countyID="191", co_state_id="5"},
{ county="Multiple Counties", countyID="3178", co_state_id="3"},
{ county="Sonoma", countyID="218", co_state_id="38"},
{ county="Los Angeles", countyID="190", co_state_id="44"}
]
这是我的ng-repeat:
<div ng-repeat="project in projects | filter:filter">
<div>
State: {{project.state}}<br>
County: {{project.county}}<br>
<span …angularjs angularjs-ng-repeat ng-options angularjs-ng-options
我有这个角度选择:
<select ng-model='obj.status' ng-options='status.code as (status.code + " " + status.phrase) for status in status_codes.data track by status.code'>`
我$scope.status_codes是这样的:
data: [
{
"code":"100",
"phrase":"...",
"spec_title":"RFC7231#6.2",
"spec_href":"http://tools.ietf.org/html/rfc7231#section-6.2"
}
...
]
$scope.obj.status当我更改我的选择时,我的更新为"300"或"100"或其他任何内容,但选择的显示始终为空白.因此,模型更新为选择输入的选定值,但输入未显示当前选定的值,它显示空白项.
如果我改变ng-options是ng-options='status as (status.code ...'有效的,但我只想在我的模型中使用status.code,而不是整个状态数组.是什么赋予了？
我{{obj | json }}在我的HTML和记载:
obj = {
"name": "",
"description": "",
"payload": "",
"status": "200",
"responseHeaders": {
"entry": [
{
"key": "",
"value": ""
},
{
"key": "",
"value": ""
}
]
}
}
javascript angularjs angularjs-ng-options angularjs-track-by
我刚刚开始使用Angular.js并对ngOptions有疑问:是否可以标记optgroup？
让我们假设2个物体 - 汽车和车库.
cars = [
{"id": 1, "name": "Diablo", "color": "red", "garageId": 1},
{"id": 2, "name": "Countach", "color": "white", "garageId": 1},
{"id": 3, "name": "Clio", "color": "silver", "garageId": 2},
...
]
garages = [
{"id": 1, "name": "Super Garage Deluxe"},
{"id": 2, "name": "Toms Eastside"},
...
]
使用此代码,我得到了几乎我想要的结果:
ng-options = "car.id as car.name + ' (' + car.color + ')' group by car.garageId for car in cars"
结果选择:
-----------------
1
Diablo (red)
Countach (white)
Firebird (red)
2
Clio …