Question

使用角度js中的模板显示单选按钮和下拉列表的最简单方法是什么？我有一个plunker，我想将单选按钮组（任务＃4）选项显示为动态值 - 我不知道该怎么做。我对选择（任务＃5）也有同样的问题。非常感谢任何帮助。

http://run.plnkr.co/eHxbQn2lm1uTE2JI/

Answer 1

我无法看到您在代码中使用<select>的尝试，所以这里有一个抽象的示例，如果您有这样的选择：

.controller('AppControl', ($scope)->
  $scope.answers = 
    q1: null
    q2: null

  $scope.options = {
    "option 1": "val1",
    "option 2": "val2"
  }
)

然后你可以制作一个单选按钮列表：

<span ng-repeat="(key, value) in options">
  <input type="radio" ng-model="answers.q1" ng-value="value"/> {{key}}
</span>

选择看起来像这样：

<select ng-model="answers.q2" 
        ng-options="value as key for (key, value) in options">
</select>

修改

要回答下面问题的第二部分：＆＃34;在这种情况下如何使用ng-show？＆＃34;：

要做到这一点，你需要增加一个＆＃34;显示是否＆＃34;在你的问题中键入条件。如果有条件，那么您只想显示问题是否符合该条件。每个问题的HTML都会更改为：

<div ng-repeat="question in questionnaire" ng-include="'questionnaire'" ng-show="(question.condition == null) || {{question.condition}}"></div>

请注意，您检查是否已指定条件，如果条件尚未指定，则ng-show表达式将评估为true。如果有，我们会插入该条件，以便我们可以使用与其他ng-show相同的语法。

然后您只需调整问题以包含条件，例如：

{ number: "5", question: "Which of the following sweets do you like?", type: "DD", condition: 'questionnaire[$index-1].answer != "blue"', values :[ { name: "hardcandy" }, { name: "chocolate" }, { name: "other" }, ] }

questionnaire[$index-1]引用上一个问题（$index来自ng-repeat，查看文档），.answer仅适用，因为我在使用ng-model="question.answer"时我回答了你以前的问题。我个人会将此ng-model属性添加到您的所有问题中。

您可以在此处看到它：Plunker

无法以角度js动态形式显示单选按钮组

1 个答案: