Wie extrahiert man Daten aus json mit angularjs?

Question

Hier in {{msg}} kann ich alle jason Daten mit Selected anzeigen: true oder false. Aber was ich brauche ist, dass ich nicht alle Daten anzeigen möchte, wenn ich auf Speichern klicke Ich möchte Fragen anzeigen .id, option.id und ausgewählt: true oder false unter dem Textfeld

wir werden alle JSON-Daten aus $ scope.questions bekommen.

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

    }] 
} 

Dies ist meine Antwort von oben code..here alle Daten

angezeigte

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

aber ich möchte die alle Frage-IDs angezeigt werden und ids entsprechende Option und wenn es aktiviert ist, ausgewählt: true sonst falsch in dem Format von oben Ausgabe

Answer 1

Wenn Sie ändern möchten, was dem Benutzer angezeigt wird, nachdem Speichern Sie diese Funktion ändern sollte:

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

zu so etwas wie:

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

diese wird zum Beispiel kommen alle IDs des Arrays, die alle Fragen conains.

Um Optionen und Auswahlen hinzuzufügen, müssen Sie den Wert einer Variablen modellieren, die Sie in Ihrem Controller verwenden.

Ich glaube, Sie sollten eine kleine Anleitung zu AngularJS Zweiweg-Daten überprüfen