使用ng-repeat可以使用填充单选按钮选项

时间:2016-03-14 16:53:47

标签: angularjs radio-button ng-repeat

  

我尝试使用ng-repeat填充单选按钮选项有什么问题?使用ng-repeat与选择和复选框时,我不会遇到同样的问题。非常感谢任何帮助。



"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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要使用

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

您错过了可用的选项