Question

我的HTML下面有以下情况：

<div ng-repeat="question in questions">
    <h2>{{question.title}}</h2>
    <ul>
        <li ng-repeat="choice in question.choices track by $index">
            <input ng-change="set(question.answer, choice)" type="checkbox" id="checkbox-{{$index}}" /> 
            <label for="checkbox-{{$index}}">{{choice}}</label>
        </li>
    </ul>
</div>

我希望当我选中该复选框时，$index推送到question.answers，我尝试使用ng-selected，ng-change，但没有结果。

有人可以向我解释一下这个的正确实现是什么？

低于我的jsfiddle。

http://jsfiddle.net/U3pVM/18292/

Answer 1

所以这就是我在这种情况下会做的事情：

选择对象列表

选择要显示的对象列表以及跟踪是否已选中的布尔值。

{
    title:'Title',
    choices: [
        {choice:"choice #1",selected:false},
        {choice:"choice #2",selected:false}, 
        {choice:"choice #3",selected:false}, 
        {choice:"choice #4",selected:false}],
},

在输入字段

上使用ng-model

然后，您可以将所选值与输入字段的模型一起使用，而不是尝试从列表onClick中推送和拉取值。

这将变得更加清洁，您个人无需跟踪项目是否在列表中并弹出，而不是每次点击都按下它。

<input type="checkbox" ng-model="choice.selected"/> <label>{{choice.choice}}</label>

Here is a working example

Another option that watches the list and builds an Answer list

此时您可能没有选定值的清晰列表，但您可以轻松遍历您的问题/选择以在需要时生成该列表。

Answer 2

这是更新的工作小提琴：

http://jsfiddle.net/U3pVM/18295/

您也可以使用ng-click

<div ng-app>
  <div ng-controller="MainCtrl">
  <div ng-repeat="question in questions">
      <h2>{{question.title}}</h2>
      <ul>
          <li ng-repeat="choice in question.choices track by $index"><input ng-change="set(question.answers, choice)" type="checkbox" id="checkbox-{{$index}}" /> <label for="checkbox-{{$index}}">{{choice}}</label></li>
      </ul>
  </div>

AngularJS ng-change复选框按$ index

2 个答案: