Question

我正在为未来的项目评估angularjs。我需要做的一件事就是显示＆＃34; channel＆＃34;的不同页面。选择适当的＆＃34;页面＆＃34;无线电输入。此外，页面按钮的范围也可以从一组＆＃34;页面集合中选择。无线电输入。

下面的工作示例包含一组32个频道，通过组合＆＃34; set＆＃34;选择可见的频道组。和＆＃34;页面＆＃34;无线电输入，总共提供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变量。谁能说出我在这里失踪的东西？

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

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

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

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

3 个答案: