Как извлечь данные из json с помощью angularjs?

Question

Здесь, в {{msg}}, я могу отображать все данные jason с помощью Selected: true или false .. , но мне нужно, чтобы я не хотел отображать все данные, когда я нажимаю кнопку «Сохранить», я хочу отображать вопросы .id, option.id и выбрано: true или false под текстовым полем

мы получим все данные json из $ scope.questions.

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

    }] 
} 

Это мой ответ выше code..here Отображение всех данных

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

, но я хочу, чтобы отобразить все вопросительные идентификаторы и соответствующие опции идентификаторов и, если он выбран, отмеченный: истинно иначе ложь в формате вывод выше

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 + ','; 
    } 
} 

это, например, сойдутся все идентификаторы массива, conains все вопросы.

Чтобы добавить параметры и варианты выбора, вы должны ng-моделировать значение для некоторой переменной, которую вы будете использовать внутри вашего контроллера.

Я думаю, вы должны проверить небольшой путеводитель по angularjs двухсторонним связывания данных