Question

我在离子中的两个无线电组框中面临问题当我点击一组无线电时，所选答案在点击第二个无线电组首先选择的无线电被删除后被保存

<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >

                <div class="list">

                    <div class="item item-divider">
                        {{q.question}}
                    </div>
                    <ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" >
                        {{ option }}
                    </ion-radio>

                    <br>

                </div>
            </div>

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope) {
  $scope.question = 
[
  {
    "is_radio": true,
    "question": "Roughly how much of your profile was spent on digital activities in your last job?",
    "options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
    "id": "130",
    "answer": ""
  },
  {
    "is_radio": true,
    "question": "Have you spent more time with B2B or B2C?",
    "options": ["B2C","Both","Less than 10%"],
    "id": "130",
    "answer": ""
  }
]

})

Here is preview | jsfiddle

Answer 1

请更改以下代码行

<ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer">

有了这个

<ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" name="radio_{{$parent.$index}}" >

这将解决您的问题。问题是由于2个单选按钮组的名称相同。所以我改变了这一点并动态地给出了。

Answer 2

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope) {
  $scope.question = 
[
  {
    "is_radio": true,
    "question": "Roughly how much of your profile was spent on digital activities in your last job?",
    "options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
    "id": "129",
    "answer": ""
  },
  {
    "is_radio": true,
    "question": "Have you spent more time with B2B or B2C?",
    "options": ["B2C","Both","Less than 10%"],
    "id": "130",
    "answer": ""
  }
]
				
})

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}

    <div ng-repeat="q in question" >

					<div class="list">

						<div class="item item-divider">
							{{q.question}}
						</div>
						<ion-radio name="{{q.id}}" ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" >
							{{ option }}
						</ion-radio>

						<br>

					</div>
				</div>
</div>

单击其他组的单选框后，单选按钮选择删除

2 个答案: