[英]AngularJS: dropdown with ng-repeat
I am new to AngularJS
. 我是AngularJS
新手。 I am creating three tickets using ng-repeat
which have dropdown list to choose number of tickets. 我正在使用ng-repeat
创建三个票证,这些票证具有下拉列表以选择票证数量。 The number should be displayed into the span, which is not happening. 该数字应显示在跨度中,这不会发生。 Please help. 请帮忙。
HTML : HTML:
<tbody>
<tr ng-repeat-start="ticket in tickets">
<td>{{ticket.name}}</td>
<td style={{ticket.status_style}}>{{ticket.status}}</td>
<td>{{ticket.enddate}}</td>
<td>{{ticket.price}}</td>
<td>
<div ng-click="click($index)" class="select">
<div><span>{{ticket.selected_item}}</span><i class="icon open"></i>
</div>
<ul id="{{ticket.ul_id}}" style="{{popup_style}}">
<li ng-click="onItemClick($index)" id="{{ticket.li_id}}" ng-repeat="selection in ticket.selections">{{selection.value}}</li>
</ul>
</div>
</td>
</tr>
<tr ng-repeat-end class="spacer">
<td colspan="6"> </td>
</tr>
</tbody>
script: 脚本:
<script>
function ticketCtrl($scope) {
$scope.tickets = [{
name: "Front Row",
status: "Sold Out",
ul_id: "",
li_id: "",
selected_item: "0",
status_style: "color: #FF0000;",
enddate: "Feb 24, 2014",
price: "Rs 10",
selections: [{
value: 1
}, {
value: 2
}, {
value: 3
}, {
value: 4
}, {
value: 5
}, {
value: 6
}, {
value: 7
}, {
value: 8
}, {
value: 9
}, {
value: 10
}]
}, {
name: "Back Row",
status: "Available",
ul_id: "ticket_ul_1",
li_id: "ticket_li_1",
selected_item: "0",
status_style: "",
enddate: "Mar 28, 2014",
price: "Rs 1",
selections: [{
value: 1
}, {
value: 2
}, {
value: 3
}, {
value: 4
}, {
value: 5
}, {
value: 6
}, {
value: 7
}, {
value: 8
}, {
value: 9
}, {
value: 10
}]
}, {
name: "On the Floor",
status: "Available",
ul_id: "ticket_ul_2",
li_id: "ticket_li_2",
selected_item: "0",
status_style: "",
enddate: "Mar 28, 2014",
price: "FREE",
selections: [{
value: 1
}, {
value: 2
}, {
value: 3
}, {
value: 4
}, {
value: 5
}, {
value: 6
}, {
value: 7
}, {
value: 8
}, {
value: 9
}, {
value: 10
}]
}];
$scope.popup_style = "display: none;";
$scope.click = function (idx) {
if (document.getElementById("ticket_ul_" + idx).style.display == "block") {
document.getElementById("ticket_ul_" + idx).style.display = "none";
} else if (document.getElementById("ticket_ul_" + idx).style.display == "none") {
document.getElementById("ticket_ul_" + idx).style.display = "block";
}
};
$scope.onItemClick = function (idx) {
$scope.tickets.selected_item = idx;
};
}
</script>
The span is bound to data in tickets[ticket].selected_item
but you are setting tickets.selected_item
. 该跨度绑定到tickets[ticket].selected_item
数据,但是您正在设置tickets.selected_item
。
You could do something like this (passing the ticket through as well): 您可以执行以下操作(也可以通过票证):
onItemClick(ticket, $index)
...
$scope.onItemClick = function (ticket, idx) {
ticket.selected_item = idx + 1;
};
if u want dropdown u can use: select tag 如果要下拉菜单,可以使用:选择标签
<select>
<option ng-repeat="ticketno in ticketlist">{{ ticketno }}</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.