AngularJS：帶有ng-repeat的下拉列表

Question

我是AngularJS新手。 我正在使用ng-repeat創建三個票證，這些票證具有下拉列表以選擇票證數量。 該數字應顯示在跨度中，這不會發生。 請幫忙。

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">&nbsp;</td>
  </tr>
</tbody> 

腳本：

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

Answer 1

該跨度綁定到tickets[ticket].selected_item數據，但是您正在設置tickets.selected_item 。

您可以執行以下操作（也可以通過票證）：

onItemClick(ticket, $index)
...
$scope.onItemClick = function (ticket, idx) {
    ticket.selected_item = idx + 1;
};

Answer 2

如果要下拉菜單，可以使用：選擇標簽

請參閱： http : //docs.angularjs.org/api/ng/directive/select下拉菜單

 <select> 
        <option ng-repeat="ticketno in ticketlist">{{ ticketno }}</option> 
</select>