複選框標記在Anuglar jS中不能正常工作

Question

我正在構建一個具有許多不同類型問題的表單的Web應用程序。現在，我受到複選框類型問題的困擾。

這裏是視圖：

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

這裏是一個JSON我渲染：

{ 
         "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" 
          } 
         ] 
        } 

當顯示我的看法，這表明3個複選框以不同的標題（不選擇，是，否）。問題是，當用戶選擇其中一個框時，它會選擇全部。並且保存到localStorage的數據只是真或假。是否可以保存爲JSON格式的圖塊？

Answer 1

首先，這是一個是或否的問題。你不能選擇兩者。所以你需要製作單選按鈕。

現在您可以將value="{{field.id}}"添加到input元素，以便您可以選擇在ng-model中存儲的值。然後使用ng-init="formData[field.id]=0"在表單的該部分的父元素上啓動ng-model。它會使Not selected選項默認爲ckecked。

一個演示：

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>