让 ng-repeat 与填充单选按钮选项一起工作

Question

What is wrong with my this attempt at using ng-repeat to populate my radio button options? I don't have the same problem with using ng-repeat with selects and checkboxes. Any help greatly appreciated.

"use strict";
angular.module("modalApp", [])
  .controller('modalCtrl', function($scope, $filter) {
    $scope.membershipTypeData = {
      availableOptions: [{
        id: '0',
        name: 'As a family (man and wife, or single person) we get the majority of our average GROSS income from sale of agricultural products produced by us or tenant. (Income from oil, gravel and other natural resources from land held for agricultural purposes counts as FARM income.)'
      }, {
        id: '1',
        name: 'I am retired from agriculture, living on income or Social Security accrued from agriculture and NOT employed full time in another occupation.'
      }, {
        id: '2',
        name: 'This membership is held by a partnership or corporation receiving the majority of income from sale of agricultural products.'
      }, {
        id: '3',
        name: 'I own or operate farmland, but my average gross agricultural income is less than half my total income. (Part-time farmers, landlords, etc.)'
      }, {
        id: '4',
        name: 'My occupation is in agri-business. I provide goods and/or services to agriculture or work for an agricultural organization or agency.'
      }, {
        id: '5',
        name: 'My occupation is NOT directly related to agriculture or agri-business.'
      }, {
        id: '6',
        name: 'This membership is held by a church, FFA chapter, an association or by a corporation NOT producing agricultural products.'
      }]
    };
  });

<html lang="en">

<body ng-app="modalApp">
  <div ng-controller="modalCtrl">
    <div>
      <form name="joinFormStep2" role="form">
        <label for="membershipType">Membership Type</label>
        <br />
        <div ng-repeat="membershipType in membershipTypeData">
          <label>
            <input type="radio" value="{{membershipType.id}}" ng-model="newMember.membershipType" ng-required="!newMember.membershipType">{{membershipType.name}}</label>
        </div>
        <br />
      </form>
    </div>
  </div>


  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>

</body>

</html>

Answer 1

你需要使用

<div ng-repeat="membershipType in membershipTypeData.availableOptions">

您错过了可用选项

让 ng-repeat 与填充单选按钮选项一起工作

Getting ng-repeat to work with populating radio button options

radio-button

angularjs

ng-repeat