AngularJS – 使用ng-repeat创建一组无线电输入

发布时间：2020-12-17 09:02:22 所属栏目：安全来源：网络整理

导读：我正在评估一个未来项目的angularjs。我将需要做的事情之一是通过选择适当的“页面”无线电输入显示不同页面的“频道”信息。此外，页面按钮的范围还可以从“页面集合”无线电输入的组中选择。下面的工作示例具有一组32个通道，其中通过“设置”和“页面”

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

下面的工作示例具有一组32个通道，其中通过“设置”和“页面”无线电输入的组合来选择可见的频道组，给出总共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变量。谁能告诉我在这里失踪？

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,3]">
         <input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="n" /> {{n}}
         </label>
     </p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!