AngularJS - 使用 ng-repeat 创建无线电输入集答案

【问题标题】：AngularJS - Using ng-repeat to create sets of radio inputsAngularJS - 使用 ng-repeat 创建无线电输入集
【发布时间】：2013-02-08 15:33:53
【问题描述】：

我正在为未来的项目评估 angularjs。我需要做的一件事是通过选择适当的“页面”无线电输入来显示不同页面的“频道”信息。此外，还可以从一组“页面集”单选输入中选择页面按钮范围。

下面的工作示例有一组 32 个频道，可见频道组是通过“set”和“page”无线电输入的组合选择的，总共有 2 * 4 个页面，每个页面有 4 个频道。

<!doctype html>
<html ng-app>
  <head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript">
      function Channels($scope) {
        $scope.groupSize = 4;
        $scope.pageSet = 0;
        $scope.pageNumber = 0;
        $scope.channels = [
          {"id": "Ch-001"}, {"id": "Ch-002"}, {"id": "Ch-003"}, {"id": "Ch-004"},
          {"id": "Ch-005"}, {"id": "Ch-006"}, {"id": "Ch-007"}, {"id": "Ch-008"},
          {"id": "Ch-009"}, {"id": "Ch-010"}, {"id": "Ch-011"}, {"id": "Ch-012"},
          {"id": "Ch-013"}, {"id": "Ch-014"}, {"id": "Ch-015"}, {"id": "Ch-016"},
          {"id": "Ch-017"}, {"id": "Ch-018"}, {"id": "Ch-019"}, {"id": "Ch-020"},
          {"id": "Ch-021"}, {"id": "Ch-022"}, {"id": "Ch-023"}, {"id": "Ch-024"},
          {"id": "Ch-025"}, {"id": "Ch-026"}, {"id": "Ch-027"}, {"id": "Ch-028"},
          {"id": "Ch-029"}, {"id": "Ch-030"}, {"id": "Ch-031"}, {"id": "Ch-032"}
        ];
      }
    </script>
  </head>

  <body ng-controller="Channels">
    <p>Set:
      <input type="radio" name="pageSet" ng-model="pageSet" ng-value="0">1-4</input>
      <input type="radio" name="pageSet" ng-model="pageSet" ng-value="1">5-8</input>
    </p>
    <p>Page:
      <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="0">{{pageSet * groupSize + 1}}</input>
      <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="1">{{pageSet * groupSize + 2}}</input>
      <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="2">{{pageSet * groupSize + 3}}</input>
      <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="3">{{pageSet * groupSize + 4}}</input>
    </p>
    <ul>
      <li ng-repeat="channel in channels | limitTo: groupSize * ((groupSize * pageSet) + pageNumber + 1) | limitTo: -groupSize">
        <p>{{channel.id}}</p>
      </li>
    </ul>
  </body>
</html>

我的问题是如何使用ng-repeat 创建页面/页面集单选输入。我尝试过以下方法：

<p>Set: <input ng-repeat="n in [0,1]" type="radio" name="pageSet" ng-model="pageSet" ng-value="{{n}}"></p>
<p>Page: <input ng-repeat="n in [0,1,2,3]" type="radio" name="pageNumber" ng-model="pageNumber" ng-value="{{n}}"></p>

看起来不错，但这些值没有绑定到相应的 pageSet/pageNumber 变量。谁能告诉我这里缺少什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

ng-repeat 创建一个子作用域，所以你必须绑定到 $parent：

这是一个小提琴：http://jsfiddle.net/g/r9MLe/2/

示例：

  <p>Set:
         <label ng-repeat="n in [0,1]">
       <input type="radio" name="pageSet" ng-model="$parent.pageSet" ng-value="n" />{{n}}
         </label>
     </p>
     <p>Page: 
         <label ng-repeat="n in [0,1,2,3]">
         <input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="n" /> {{n}}
         </label>
     </p>

【讨论】：

没问题，另一种解决方法是使用嵌套属性，例如 pager.pageSet 和 pager.pageNumber，通过 javascript 原型继承它会修改 $parent 范围内的对象。
很好，谢谢。我实际上选择将寻呼机变量放在单独的控制器下，以便我可以复制功能并共享频道数据。
如果你使用Ionic框架，你需要使用$parent.$parent作为$parent指向滚动对象。

【解决方案2】：

仅使用 JSON 中的值有什么问题？

       <table>
          <tr ng-repeat="v in partneradd.verifications">
            <td>{{v.label}}</td>
            <td>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="{{v.value}}" value="required"> Required
                </label>
              </div>
            </td>
            <td>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="{{v.value}}" value="optional"> Optional
                </label>
              </div>
            </td>
          </tr>
        </table>

来自数据：

vm.verifications = [
{
  "label" : "Valid last line (USPS only)",
  "value" : "vll",
  "type" : "optional"
},
{
  "label" : "Domestic recipient",
  "value" : "dr",
  "type" : "optional"
},
];

【讨论】：

【解决方案3】：

这是一个简单的例子。希望一切都清楚。

参数name在单选按钮中是强制性的（用于检查组中的一个按钮）。

HTML：

<form name="myForm" ng-controller="MyCtrl">
    <p>Favorite Beatle</p>
    <ul>
        <li ng-repeat="person in people">
            <label>
                <input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}}
            </label>
        </li>
    </ul>
    <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
    <button ng-disabled="myForm.$invalid">Submit</button>
</form>

Javascript：

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}

【讨论】：