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

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

angularjs

AngularJS-使用ng repeat创建无线电输入集,angularjs,Angularjs,我正在为一个未来的项目评估angularjs。我需要做的一件事是通过选择合适的“页面”无线电输入来显示不同页面的“频道”信息。此外，还可以从一组“页面集”无线电输入中选择页面按钮的范围下面的工作示例有一组32个频道，通过“设置”和“页面”无线电输入的组合选择可见的频道组，每个频道总共有4个2*4个页面 <!doctype html> <html ng-app> <head> <script type="text/javascript" sr

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

下面的工作示例有一组32个频道，通过“设置”和“页面”无线电输入的组合选择可见的频道组，每个频道总共有4个2*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>

这看起来是正确的，但是这些值没有绑定到相应的pageSet/pageNumber变量。有人能告诉我这里缺少了什么吗？

ng重复创建子作用域，因此您必须绑定到$parent：

这是一把小提琴：

样本：

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

设置：
{{n}}

第页：
{{n}}

仅使用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>

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

单选按钮中的参数

name

是必需的（对于能力，请从组中选择一个按钮）

Html:

没问题，另一个解决方法是使用嵌套属性，例如pager.pageSet和pager.pageNumber，通过javascript原型继承，它将修改$parent作用域上的对象。很好，谢谢。实际上，我选择将寻呼机变量置于单独的控制器下，以便复制功能并共享频道数据。如果您使用的是Ionic framework，则需要使用$parent.$parent作为$parent点来滚动对象。

       <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"
},
];

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

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