Question

我是Angular的新人，我遇到了一个问题，我找不到可以帮助我的答案，如果有人可以，谢谢你。：）

我有一个像这样的json：

"items": [
{
  "post_type": "release",
  "label": "Releases"
},
{
  "post_type": "news",
  "label": "Notícias",
  "options": [
    {
      "id": 1,
      "name": "Galeria de Fotos"
    },
    {
      "id": 2,
      "name": "Agência de Notícias"
    },
    {
      "id": 3,
      "name": "Rádio"
    },
    {
      "id": 4,
      "name": "TV"
    }
  ]
},....

我得到的数据如下：

  var _preparingPostTypes = function ($scope) {
    $scope.post_types = [];

    PostTypeService.getPostTypes().then(function (data) {
      $scope.post_types = data.data;
    });
  };

我想要做的是创建2个选择，第1个 - 使用post_type（＆＃39;发布＆＃39;，＆＃39;新闻＆＃39;），第二个使用＆＃39;选项＆＃39; ;来自post_type的数组，仅当选择带有＆＃39;选项的选项时才可见。在像“新闻”这样的数组中。我做了类似的事情，我可以把post_type变成魅力，但我不知道如何继续：

<div class=form-group>
    <label>Pesquisar em:</label>

    <select title="Pesquisar em:" class="form-control select-post-type"
        ng-model="widget.post_type"
        ng-options="item.post_type as item.label for item in post_types.items"></select>
</div>

修改

在我的请求中，我需要将post_type字符串从第一个选择传递给服务器，因此ng-options是：

ng-options="item.post_type as item.label for item in post_types.items

不

ng-options="item as item.label for item in post_types.items

谢谢大家！

Answer 1

您可以将ng-change添加到调用加载选项的函数的第一个选择

<select title="Pesquisar em:" class="form-control select-post-type"
    ng-model="widget.post_type"
    ng-options="item as item.label for item in post_types.items" ng-change="typeChanged()"></select>

该函数将在$ scope.options中加载所选的类型选项。然后在第二个选择

中迭代$ scope.options

<强>更新

我没有测试过代码，但它可能会指导你

选择

<select title="Options:" class="form-control select-post-type"
      ng-model="widget.option"
      ng-options="option as option.name for option in options">

更改功能（当第一个选择的值更改时触发，因此它将负责加载所选post_type的选项）：

$scope.typeChanged = function() { 
    for (var i = 0; i < $scope.post_types.items.length; ++i) {
        if ($scope.post_types.items[i].label == $scope.widget.post_type) $scope.options = $scope.post_types.items[i].options || [];
    }
}

Answer 2

gradle.settings应包含所选项目。所以其他选择可以有像widget.post_type这样的选项。请注意，如果您希望这样做，您可能应该在每个项目上都有一个选项集合。

Answer 3

您可以使用以下技术轻松完成此操作。您只需要使用第一个选择中的ng-model。看我的方法：

<label>Pesquisar em:</label>

<select title="Pesquisar em:" class="form-control select-post-type"
    ng-model="firstSelect"
    ng-options="item as item.label for item in post_types.items"></select>

<select title="Second one" class="form-control select-post-type"
    ng-model="secondSelect" ng-show="firstSelect.options"
    ng-options="option as option.name for option in firstSelect.options"></select>

angularjs - 基于先前选择选项

3 个答案: