angularjs - for - ng-if



AngularJS-Uso di ng-repeat per creare set di ingressi radio (2)

Sto valutando angularjs per un progetto futuro. Una delle cose che dovrò fare è visualizzare diverse pagine di informazioni "canale" selezionando un appropriato ingresso radio "pagina". Inoltre, intervalli di pulsanti di pagina possono anche essere selezionati da un gruppo di ingressi radio "set di pagine".

L'esempio di lavoro seguente ha un set di 32 canali con il gruppo visibile di canali selezionati tramite una combinazione di ingressi radio "set" e "page", per un totale di 2 * 4 pagine di 4 canali ciascuna.

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

La mia domanda è come creare gli input radio della pagina / pagina usando ng-repeat . Ho provato approcci come:

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

che sembra giusto, ma i valori non si legano alle corrispondenti variabili pageSet / pageNumber. Qualcuno può dire cosa mi manca qui?


Cosa c'è che non va usando solo un valore dal 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>

dai dati:

vm.verifications = [
{
  "label" : "Valid last line (USPS only)",
  "value" : "vll",
  "type" : "optional"
},
{
  "label" : "Domestic recipient",
  "value" : "dr",
  "type" : "optional"
},
];

Questo è un semplice esempio. Spero che tutto sia chiaro.

Il name parametro è obbligatorio nel pulsante di opzione (per verificare l'abilità di un pulsante dal gruppo).

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