Question

我希望根据给定的JSON格式选择select和checkbox按钮。

  {
    "autoselect": [
      "doloremque", 
      "amet natus aut", 
      "tenetur"
    ], 
    "component": "checkbox", 
    "description": "blanditiis exercitation quidem molestiae eius aliquam deserunt consequat", 
    "editable": false, 
    "label": "vel qui autem", 
    "options": [
      "mollitia voluptatum", 
      "doloremque", 
      "amet natus aut", 
      "inventore", 
      "tenetur"
    ], 
    "required": true
  },

  {
    "autoselect": [
      "debitis exercitationem"
    ], 
    "component": "select", 
    "description": "nihil animi ut qui consequuntur velit", 
    "editable": false, 
    "label": "dolorum quo", 
    "options": [
      "aliquid", 
      "eius", 
      "voluptatem aliqua vel", 
      "earum voluptatem", 
      "debitis exercitationem"
    ], 
    "required": true
  }, 
  {
    "autoselect": [
      "doloremque", 
      "amet natus aut", 
      "tenetur"
    ], 
    "component": "checkbox", 
    "description": "blanditiis exercitation quidem molestiae eius aliquam deserunt consequat", 
    "editable": false, 
    "label": "vel qui autem", 
    "options": [
      "mollitia voluptatum", 
      "doloremque", 
      "amet natus aut", 
      "inventore", 
      "tenetur"
    ], 
    "required": true
  }

select和checkbox按钮都应根据options数组中的元素数显示。以及基于自动选择值的单选按钮的值。如果自动选择值与任何选项值匹配，则相应的选项选择和复选框按钮将为真，剩余将为假。

如果JSON对象不包含自动选择值，则最初不应选择任何选择和复选框按钮。

Contoller.js

var app = angular.module('myApp',[]);
            app.controller('MainCtrl', function ($scope, $http, $log) {
                $scope.selected = [];
                $http({
                        method: 'GET',
                        url: 'data.json'})
                    .then(function(response) {
                        $scope.error = response;
                        $scope.renderTags = response.data.data;
                        $log.info(response);
                    }, function(reason){
                        $scope.error = reason.data;
                    }); 

                $scope.clicked=function(option){
                    console.log(option);
                }
            });

HTML代码

<div class="mainBody" ng-repeat="tag in renderTags.form_fields track by $index">
                <div ng-switch on="tag.component">
                    <div ng-switch-when="checkbox">
                        {{tag.label}}: </br>
                        <div ng-repeat="select in tag.options" ng-disabled="!tag.editable" ng-required="tag.required">
                            <span ng-if="tag.autoselect!== null">
                                <span ng-if="tag.autoselect[0] === select">
                                    <input type="checkbox" checked ng-value="select" name="$index" ng-click="clicked(select)"/>{{select}}
                                </span>
                                <span ng-if="tag.autoselect[0] !== select">
                                    <input name="$index" type="checkbox" ng-value="select">{{select}}
                                </span>
                            </span>
                        </div>
                    </div></br>
                    <div ng-switch-when="select">
                        {{tag.label}}: 
                        <select ng-disabled="!tag.editable" ng-required="tag.required" ng-selected="selection">
                            <option ng-repeat="choice in tag.options">{{choice}}</option>
                        </select>
                    </div></br>
                    <div ng-switch-default>

                    </div>
                </div>          
            </div>

当自动选择值不存在时，我的代码无效。

Here is the link to plunkr

提前致谢..

Answer 1

添加了

ng-model和ng-checked条件。我也修改了复选框点击方法。

plunker link

在angularJS中显示JSON中选定的选择和复选框按钮

1 个答案: