Question

在{{msg}}中我可以用Selected显示所有jason数据：true或false .. 但我需要的是我不想显示所有数据，当我点击保存按钮我想显示questions.id，option.id并选中：true或false在文本框下面

我们将从$ scope.questions获取所有json数据。

Home.html中

    <div ng-repeat="question in filteredQuestions">
            <div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
            <div class="row">
                <div class="row">
                    <h3>{{currentPage}}. <span ng-bind-html="question.Name"></span></h3>
                </div>
            </div>
            <div class="row text-left options">
                <div class="col-md-6" ng-repeat="option in question.Options" style="float:right;">
                    <div class="option">
                        <label class="" for="{{option.Id}}">
                           <h4> <input id="{{option.Id}}" type="checkbox" ng-model="option.Selected" ng-change="onSelect(question, option);" />
                            {{option.Name}}</h4>
                        </label>
                    </div>
                </div>
                </div>

            <div class="center"><button ng-click="save()">Save</button></div>
            <div class="center"><textarea  rows="5" cols="50">{{msg}}</textarea></div>
        </div>

controllers.js

var HomeController = function ($scope, $http, helper) {

    /*$scope.names = response.data;

    $scope.detectChange=function(){
        $scope.msg = 'Data sent: '+ JSON.stringify($scope.filteredQuestions);
    }*/
    $scope.save = function() {
        $scope.msg = 'Data sent: '+ JSON.stringify($scope.questions);
    }
 $scope.quizName = 'data/csharp.js';
 $scope.loadQuiz = function (file) {
        $http.get(file)
         .then(function (res) {
             $scope.quiz = res.data.quiz;
             $scope.config = helper.extend({}, $scope.defaultConfig, res.data.config);
             $scope.questions = $scope.config.shuffleQuestions ? helper.shuffle(res.data.questions) : res.data.questions;
             $scope.totalItems = $scope.questions.length;
             $scope.itemsPerPage = $scope.config.pageSize;
             $scope.currentPage = 1;
             $scope.mode = 'quiz';

             $scope.$watch('currentPage + itemsPerPage', function () {
                 var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                   end = begin + $scope.itemsPerPage;

                 $scope.filteredQuestions = $scope.questions.slice(begin, end);
             });
         });
    }
    $scope.loadQuiz($scope.quizName);
}

HomeController.$inject = ['$scope', '$http', 'helperService'];

csharp.js

{
    "quiz": {
        "Id": 2,
        "name": "C# and .Net Framework",
        "description": "C# and .Net Quiz (contains C#, .Net Framework, Linq, etc.)",
        "paragraph": "In 2015 Microsoft released ASP.NET 5.ASP.NET 5 is a significant redesign of ASP.NET.ASP.NET, MVC, and Web Pages are now merged into a single framework named MVC 6.It includes the following features:Linux support OSX support Node.js supportA ngularJS supportTag ,HelpersView, ComponentsWeb ,APIGruntJS ,supportBower, supportNo ,Visual BasicNo Web Forms"
    },
    "config": {
        "shuffleQuestions": true,
        "showPager": false,
        "allowBack": true,
        "autoMove": false
    },
    "questions": [{
        "Id": 1010,
        "Name": "Which of the following assemblies can be stored in Global Assembly Cache?",
        "QuestionTypeId": 1,
        "Options": [{
            "Id": 1055,
            "QuestionId": 1010,
            "Name": "Private Assemblies"
        }, {
            "Id": 1056,
            "QuestionId": 1010,
            "Name": "Friend Assemblies"
        }, {
            "Id": 1057,
            "QuestionId": 1010,
            "Name": "Public Assemblies"
        }, {
            "Id": 1058,
            "QuestionId": 1010,
            "Name": "Shared Assemblies"
        }]
    }, {
        "Id": 1019,
        "Name": "Which of the following does NOT represent Integer?",
        "QuestionTypeId": 1,
        "Options": [{
            "Id": 1055,
            "QuestionId": 1010,
            "Name": "Char"
        }, {
            "Id": 1056,
            "QuestionId": 1010,
            "Name": "Byte"
        }, {
            "Id": 1057,
            "QuestionId": 1010,
            "Name": "Short"
        }, {
            "Id": 1058,
            "QuestionId": 1010,
            "Name": "Long"
        }]

    }]
}

这是我对上述代码的回答..显示所有数据

Data sent: [{"Id":1013,"Name":"Which of the following is NOT an Arithmetic operator in C#.NET?","QuestionTypeId":1,"Options":[{"Id":1055,"QuestionId":1010,"Name":"** (Double Star)","$$hashKey":"00X","Selected":false},{"Id":1057,"QuestionId":1010,"Name":"+ (Plus)","$$hashKey":"00Y","Selected":false},
"$$hashKey":"00C"}]

但我想显示所有问题ID和相应的选项ID，如果选中，则选择：true，否则为false，格式为上述输出

Answer 1

如果您想更改保存后呈现给用户的内容，则应更改此功能：

$scope.save = function() {
    $scope.msg = 'Data sent: '+ JSON.stringify($scope.questions);
}

类似于：

$scope.save = function() {
    $scope.msg = 'Question IDs:';
    $scope.questions.forEach(function(el){
        $scope.msg += el.Id + ',';
    }
}

例如，这将连接所有问题的数组的所有ID。

要添加选项和选项，您必须将值建模到您将在控制器中使用的某个变量。

我认为你应该查看angularjs双向数据绑定的小指南

如何使用angularjs从json中提取数据？

1 个答案: