Javascript AngularJS：带ng repeat的下拉列表_Javascript_Html_Angularjs

Javascript AngularJS：带ng repeat的下拉列表

javascript html angularjs

Javascript AngularJS：带ng repeat的下拉列表,javascript,html,angularjs,Javascript,Html,Angularjs,我是新来的AngularJS。我正在使用ng repeat创建三张票证，其中有下拉列表来选择票证数量。数字应显示在范围内，但这不会发生。请帮忙 HTML: <tbody> <tr ng-repeat-start="ticket in tickets"> <td>{{ticket.name}}</td> <td style={{ticket.status_style}}>{{ticket.status}}</td

我是新来的

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>


{{ticket.name}
{{ticket.status}
{{ticket.enddate}
{{票.价}
{{ticket.selected_item}

{{selection.value}

脚本：

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


功能tickettrl（$scope）{
$scope.tickets=[{
姓名：“前排”，
状态：“售罄”，
ul_id:“”，
li_id:“，
所选项目：“0”，
状态_样式：“颜色：#FF0000；”，
截止日期：“2014年2月24日”，
价格：“10卢比”，
选择：[{
价值：1
}, {
价值：2
}, {
价值：3
}, {
价值：4
}, {
价值：5
}, {
价值：6
}, {
价值：7
}, {
数值：8
}, {
数值：9
}, {
数值：10
}]
}, {
姓名：“后排”，
状态：“可用”，
ul_id:“票证ul_1”，
li_id:“票证li_1”，
所选项目：“0”，
状态类型：“，
截止日期：“2014年3月28日”，
价格：“1卢比”，
选择：[{
价值：1
}, {
价值：2
}, {
价值：3
}, {
价值：4
}, {
价值：5
}, {
价值：6
}, {
价值：7
}, {
数值：8
}, {
数值：9
}, {
数值：10
}]
}, {
姓名：“在地板上”，
状态：“可用”，
ul_id:“票证ul_2”，
li_id:“票证li_2”，
所选项目：“0”，
状态类型：“，
截止日期：“2014年3月28日”，
价格：“免费”，
选择：[{
价值：1
}, {
价值：2
}, {
价值：3
}, {
价值：4
}, {
价值：5
}, {
价值：6
}, {
价值：7
}, {
数值：8
}, {
数值：9
}, {
数值：10
}]
}];
$scope.popup_style=“显示：无；”；
$scope.click=函数（idx）{
if（document.getElementById（“票证”+idx.style.display==“块”）{
document.getElementById（“票证”+idx）.style.display=“无”；
}else if（document.getElementById（“票证”+idx.style.display==“无”）{
document.getElementById（“票证”+idx）.style.display=“块”；
}
};
$scope.mclick=函数（idx）{
$scope.tickets.selected_item=idx；
};
}

范围绑定到

票证[ticket]中的数据。已选择的\u项目

，但您正在设置

票证。已选择的\u项目

你可以这样做（也可以把票传过去）：

如果您可以创建一个JSFIDLE，那将很有帮助。这是不对的。您不应该更改控制器上的UI。如果您觉得必须这样做，那么您没有按照预期的方式使用Angular。用户界面的修改属于指令，而您在代码中使用的点击逻辑可以用更少的代码来完成。使用ng-show.@francisco.preller，谢谢您的回复，一个教程链接会很好。虽然我的回答可以解决您的具体问题，我会关注francisco发布的链接，因为在angular中有更好的方法可以做到这一点。我应该如何通过

罚单

？比如-->

ng click=“onItemClick（$index，{{{ticket}}）”

。是否正确？我想应该是

ng click=“onItemClick（$index，ticket）”