AngularJS: dropdown with ng-repeat

Question

I am new to AngularJS. I am creating three tickets using ng-repeat which have dropdown list to choose number of tickets. The number should be displayed into the span, which is not happening. Please help.

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:

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

This isn't right. You shouldn't change the UI on your controller. If you feel you have to, you are not using Angular the way it was intended to be used. UI modifications belong in directives, and this click logic you're clogging your code with can be done in much less code making use of ng-show. — francisco.preller
– francisco.preller, Commented Feb 24, 2014 at 11:55
@francisco.preller, thanks for reply, a tutorial link would be great. — mrsus
– mrsus, Commented Feb 24, 2014 at 12:02
While my answer will fix your specific problem, I would follow the link francisco has posted as there are better ways of doing this in angular. — Tjkoopa
– Tjkoopa, Commented Feb 24, 2014 at 12:09

Tjkoopa · Accepted Answer · 2014-02-24 11:52:10Z

1

The span is bound to data in tickets[ticket].selected_item but you are setting 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;
};

answered Feb 24, 2014 at 11:52

Tjkoopa

2,3861 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrsus Over a year ago

how should i pass the ticket? like--> ng-click="onItemClick($index,{{ticket}})". Is it correct?

Tjkoopa Over a year ago

I think it would just be ng-click="onItemClick($index,ticket)"

Collectives™ on Stack Overflow

AngularJS: dropdown with ng-repeat

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related