Question

我有以下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",
    }]
}]

我正在使用带有ng-options的select来迭代每个问题。在选择内部我添加了一个带有绑定选项的下拉列表。

这是正常的。

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

我尝试使用基于模型属性ng-show的{{1}}和ng-hide。我认为将这个与第二个问题的答案绑定很容易，但我无法想到这样做的方法。

有没有人有想法？

Answer 1

这可能对我有所帮助，

在此，我将显示分隔如下

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

过滤选项过滤器：为了过滤选项，我已应用过滤器选择具有给定值的选项（＆＃39;是＆＃39;）＆＃39;选项＆＃39;

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代码：

  <body ng-controller="MainCtrl">
    <h1>Select Question</h1>
    <select id="s1" ng-model="selectedQuestion" ng-options="item as item.Question for item in Questions">

    </select>
    <h3>The selected item just for reference:</h3>
    <pre>{{selectedQuestion | json}}</pre>
    <hr>
    <questioninfo question="selectedQuestion"></questioninfo>
  </body>

</html>

点击此链接[Plunker]：http://plnkr.co/edit/LIVVofC8nyYtbYYVBBCb?p=preview

Answer 2

感谢Ganesh的详细解答。我期待更简单的方式。

我想我找到了答案。我更新了JSON以使其更容易，但这并没有太大影响。

        [{
            "Question": "Sample question One",
            "Options": ["Yes", "No"],
            "SelectedOption": "Yes"
        }, {
            "Question": "Sample question Two",
            "Options": ["Yes", "No"],
            "SelectedOption": "Yes"
        }, {
            "Question": "Sample question Three",
            "Options": ["Yes", "No"],
            "SelectedOption": "Yes"
        }]

在html上，我有以下内容：

<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，我正在使用ng-show。

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

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

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

的答案第二个问题。直到问题加载，div被隐藏。

内部下拉选择角度js

2 个答案: