0

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>
iJade
  • 23,144
  • 56
  • 154
  • 243
mrsus
  • 5,446
  • 4
  • 31
  • 44
  • would be helpful if you could create a jsfiddle.. – iJade Feb 24 '14 at 11:31
  • 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 Feb 24 '14 at 11:55
  • @francisco.preller, thanks for reply, a tutorial link would be great. – mrsus Feb 24 '14 at 12:02
  • 2
    http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – francisco.preller Feb 24 '14 at 12:03
  • 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 Feb 24 '14 at 12:09

1 Answers1

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;
};
Tjkoopa
  • 2,298
  • 1
  • 17
  • 20