Checkbox-Tag funktioniert nicht richtig in Anuglar jS

Question

Ich baue eine Web-App, die ein Formular mit vielen verschiedenen Arten von Fragen hat. Jetzt leide ich mit Checkbox Art von Fragen. Hier

ist die Ansicht:

  <div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'checkbox'"> 
       <label for="{{field.id}}">{{field.title}}</label> 
       <br> 
       <label ng-repeat="value in field.values"><input type="checkbox" id="{{field.id}}" name="field.id" ng-model="formData[field.id]"> {{value.title}}</label> 
       <p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p> 

       <div ng-show="form.$submitted" ng-cloack> 
        <span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span> 
       </div> 
      </div> 

Hier ist ein JSON Ich bin Rendering:

{ 
         "id": "4_6_yes_no_question", 
         "title": "6. Do you qualify for this?", 
         "type": "checkbox", 
         "info": "If yes, check yes", 
         "size": { 
          "width": 100, 
          "height": 1 
         }, 
         "validations": { 
          "required": true 
         }, 
         "values": [ 
          { 
           "id": 0, 
           "title": "Not Selected" 
          }, 
          { 
           "id": 1, 
           "title": "Yes" 
          }, 
          { 
           "id": 2, 
           "title": "No" 
          } 
         ] 
        } 

Wenn meine Ansicht gezeigt wird, zeigt es drei Kontrollkästchen mit verschiedenen Titeln (nicht ausgewählt, ja , Nein). Das Problem besteht darin, dass wenn ein Benutzer eines der Kästchen auswählt, es alle auswählt. Und die Daten, die in localStorage gespeichert werden, sind nur wahr oder falsch. Ist es möglich, die Kachel zu speichern, die ich in JSON habe?

Answer 1

Zunächst ist dies eine Ja oder Nein Frage. Sie können nicht beide auswählen. Also müssen Sie es Radio-Button machen.

Jetzt können Sie ein value="{{field.id}}" zum input Element hinzufügen, so dass Sie wählen können, welcher Wert in der ng-model gespeichert wird. Und initiieren Sie die ng-model am übergeordneten Element dieses Abschnitts des Formulars mit ng-init="formData[field.id]=0". Die Option Not selected wird standardmäßig aktiviert.

Eine Demo:

angular.module('theApp', []).controller('theCtrl', function($scope) { 
 
    $scope.field = { 
 
    "id": "4_6_yes_no_question", 
 
    "title": "6. Do you qualify for this?", 
 
    "type": "radio", 
 
    "info": "If yes, check yes", 
 
    "size": { 
 
     "width": 100, 
 
     "height": 1 
 
    }, 
 
    "validations": { 
 
     "required": true 
 
    }, 
 
    "values": [{ 
 
     "id": 0, 
 
     "title": "Not Selected" 
 
    }, { 
 
     "id": 1, 
 
     "title": "Yes" 
 
    }, { 
 
     "id": 2, 
 
     "title": "No" 
 
    }] 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="theApp" ng-controller="theCtrl"> 
 
    <div ng-init="formData[field.id]=0" class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'"> 
 
    <label for="{{field.id}}">{{field.title}}</label> 
 
    <br> 
 
    <label ng-repeat="value in field.values"> 
 
     <input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.id}}">{{value.title}}</label> 
 
    <p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p> 
 

 
    <div ng-show="form.$submitted" ng-cloack> 
 
     <span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span> 
 
    </div> 
 
    
 
    Selected Value is : {{formData[field.id]}} 
 
    </div> 
 
</div>