在angularJS中显示来自JSON的所选选择和复选框按钮 [英] Display selected select and checkbox button from JSON in angularJS

问题描述

我想要根据给定的JSON格式选择选择和复选框按钮。

I want the select and checkbox button to be selected depending on the given JSON format.

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

选择和复选框按钮应显示在数字的基础上的选项数组中的元素。并且基于autoselect值的单选按钮的值。如果autoselect值与任何选项值匹配，则相应的选项选择和复选框按钮将为真，剩余将为false。

Both select and checkbox button should display on the basis of number of element in options array. And the value of radio button based on autoselect value. If autoselect value match with any value of options then corresponding option select and checkbox button will be true and remaining will false.

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

And if JSON object does not contain autoselect value then none of the select and checkbox button should be selected initially.

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>

当autoselect值不在那时我的代码不工作。

when autoselect values is not there that time my code is not working.

以下是plunkr的链接

提前感谢

推荐答案

ng-model 和 ng-checked 条件被添加。另外我修改了点击方式。

ng-modeland ng-checkedconditions are added. Also I have modified checkbox clicked method.

plunker链接

这篇关于在angularJS中显示来自JSON的所选选择和复选框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！