Angularjs 角度js中选择内的下拉列表

我有以下JSON对象：

[{
    "Question": "Sample question One",
    "Options": [{
        "OptionId": 1,
        "Option": "Yes"
    }, {
        "OptionId": 2,
        "Option": "No"
    }]
}, {
    "Question": "Sample question Two",
    "Options": [{
        "OptionId": 1,
        "Option": "Yes"
    }, {
        "OptionId": 2,
        "Option": "No"
    }]
}, {
    "Question": "Sample question Three",
    "Options": [{
        "OptionId": 1,
        "Option": "Yes"
    }, {
        "OptionId": 2,
        "Option": "No",
    }, {
        "OptionId": 3,
        "Option": "May be",
    }]
}]

我使用select和ng选项来迭代每个问题。在“选择”对话框中，我正在添加一个带有绑定选项的下拉列表

这是正常工作

现在，如果为第二个问题选择的选项为“否”，我必须隐藏一个div，如果选择的选项为“是”，我必须显示div

我尝试基于模型属性isDetailsVisible使用ng show和ng hide。我原以为将这一点与第二个问题的答案联系起来是很容易的，但我想不出一种方法来做到这一点

---

有人有想法吗？

我想这可能会对你有所帮助

在这篇文章中，我将显示器分为以下几个部分

自定义指令questioninfo：用于显示有关所选问题的信息。这也显示了所选问题的选项，但在迭代之前，我使用选项上的过滤器仅获取值为“Yes”的可用选项

过滤器选项过滤器：为了过滤选项，我应用了过滤器来选择“选项”中给定值为“是”的选项

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

app.factory('dataService', function() {
  return {
    data: {
      "Questions": [{
        "Question": "Sample question One",
        "Options": [{
          "OptionId": 1,
          "Option": "Yes"
        }, {
          "OptionId": 2,
          "Option": "No"
        }]
      }, {
        "Question": "Sample question Two",
        "Options": [{
          "OptionId": 1,
          "Option": "No"
        }, {
          "OptionId": 2,
          "Option": "No"
        }]
      }]
    }

  };
});

// I am using this filter because options should not be many
app.filter('optionFilter', function() {
  return function(items, value) {
    if (!angular.isUndefined(items)) {
      var arrayToReturn = [];
      for (var i = 0; i < items.length; i++) {
        if (items[i].Option === value) {
          arrayToReturn.push(items[i]);
        }
      }

      return arrayToReturn;
    }
  };
});

app.directive('questioninfo', function() {

  return {
    restrict: 'AE',
    scope: {
      selectedQuestion:'=question'
    },

    controller: function($scope) {},
    template: '<h2>{{selectedQuestion.Question}}</h2>\
    <h3>Available Options</h3>\
     <div  ng-repeat="option in selectedQuestion.Options|optionFilter:\'Yes\'"> \
     <div ng-if="shouldShowOption(option)"><b>Option {{option.OptionId}}</b> {{option.Option}}</div>\
     </div>\
    \
     '

  };
})

app.controller('MainCtrl', function($scope, dataService) {
  $scope.name = 'World';
  $scope.data = dataService.data;
  $scope.Questions = dataService.data.Questions;
  $scope.selectedQuestion = dataService.data.Questions[1].Question;
});

HTML代码：

---

查看此链接[Plunker]：

感谢Ganesh提供的详细答案。我期待一个更简单的方法

我想我找到了答案。我更新了JSON以使其更简单，但这不会产生太大影响

<div class="col-md-12 nopadding" data-ng-repeat="Question in Questions">
<select ng-model="question.SelectedOption" ng-options="option for option in Question.Options"> </select></div>

关于html，我有以下内容：

 <div class="box-3" ng-show="Questions[1].SelectedOption === 'Yes'">

对于我必须显示和隐藏的div，我使用的是ng show

这个很好用。但我觉得ng show应该映射到属性或方法，这样逻辑就驻留在控制器中，而不是html中

如果您对我的上述方法有任何意见，或者对如何将此逻辑转移到控制器有任何想法，我将不胜感激。最初不加载问题。有一个按钮点击，问题加载，从那时起，我希望div对问题的答案作出回应

---

第二个问题。在问题加载之前，div将隐藏。

您应该为每个选项设置规则，然后根据每个规则隐藏或显示问题。您可以共享一些表单代码吗？

<div class="col-md-12 nopadding" data-ng-repeat="Question in Questions">
<select ng-model="question.SelectedOption" ng-options="option for option in Question.Options"> </select></div>

 <div class="box-3" ng-show="Questions[1].SelectedOption === 'Yes'">