尝试设置数据和选择的选项以在角度 js 中选择答案

【问题标题】：trying to set data and selected option to select in angular js尝试设置数据和选择的选项以在角度 js 中选择
【发布时间】：2017-11-08 18:03:32
【问题描述】：

在我的应用程序中，我选择了我与选项绑定的选项，并且用户在页面加载时选择了保存的数据。

Fiddle Link for issue

<div ng-app ng-controller="QuestionController">
   <ul ng-repeat="question in Questions">
   <li>
  <div>{{question.Text}}</div>
  <select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options">
  </select>
  <select ng-model="OptSelected" ng-options="option for option in question.Options">

   </li>
  </ul>
</div>

在我的角度控制器中

function QuestionController($scope) {
   $scope.Answers = {};

$scope.Questions = [{ "Text": "Gender?", "Name": "GenderQuestion",
"Options": [{1,"Male"}, {2,"Female"}],
"OptSelected": [{1,"Male"}]},{ "Text": "Favorite color?","Name": "ColorQuestion", 
"Options": [{1,"Red"}, {2, "Blue"}, { 3,"Green"}],"OptSelected": [{ 2, "Blue"}] }];

 angular.forEach($scope.Questions, function(q) {
   var propModel = "Answers['" + q.Name + "']";

   $scope[propModel] = q.OptSelected;
 })

在我的应用程序中，我成功地将数据绑定到选择，但我无法将用户保存的值设置为选择。

我试图用 fiddle 重新创建问题，但没有取得多大成功，但我认为它会让你们更好地理解我正在尝试做的事情

【问题讨论】：

标签： javascript angularjs model-view-controller

【解决方案1】：

我建议仅绑定到 Questions 数组，并避免尝试绑定到 Answers 数组中的相应问题的复杂性。您始终可以在选择后或通过某些控制器级别的操作一起从问题数组中提取您需要的内容。

也就是说，您的部分问题是您没有格式良好的对象数组。

这是一个简化的工作版本：

var app = angular.module('myApp', []);

app.controller('QuestionController', function($scope) {

  $scope.Questions = [{
    Text: "Gender?",
    Name: "GenderQuestion",
    Options: [{
      id: 1,
      desc: "Male"
    }, {
      id: 2,
      desc: "Female"
    }],
    OptSelected: {
      id: 1,
      desc: "Male"
    }
  }, {
    Text: "Favorite color?",
    Name: "ColorQuestion",
    Options: [{
      id: 1,
      desc: "Red"
    }, {
      id: 2,
      desc: "Blue"
    }, {
      id: 3,
      desc: "Green"
    }],
    OptSelected: {
      id: 2,
      desc: "Blue"
    }
  }];

});

<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>

<div ng-controller="QuestionController">
  <ul ng-repeat="question in Questions">
    <li>
      <div>{{question.Text}}</div>
      <select ng-model="question.OptSelected" ng-options="option as option.desc for option in question.Options track by option.id">
      </select>
    </li>
  </ul>
</div>

</html>

【讨论】：

感谢您的回答。我同意我在小提琴的应用程序中模仿这个问题并不是很成功。我所需要的只是跟踪。我是 Angular 新手，所以每一步都是新发现。我在几个例子中看到了跟踪，但没有考虑它的重要性。好吧，我所做的只是添加轨道，它运行良好。谢谢