63

我正在为未来的项目评估 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 变量。谁能告诉我这里缺少什么？

4

3 回答 3

178

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>
于 2013-02-08T15:46:40.520 回答
6

仅使用 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"
},
];
于 2015-02-23T14:41:55.430 回答
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"
    }];
}
于 2016-11-09T15:36:37.603 回答