63

私は将来のプロジェクトのためにangularjsを評価しています。私がする必要があることの1つは、適切な「ページ」ラジオ入力を選択することによって、「チャネル」情報のさまざまなページを表示することです。さらに、ページボタンの範囲は、「ページセット」無線入力のグループから選択することもできます。

以下の作業例には、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>

私の質問は、を使用してページ/ページセットの無線入力を作成する方法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 に答える