Question

我是一个我无法处理的快速问题。

我有一个下拉列表的数据，并且根据为该下拉列表选择的值，我希望数据在第二个下拉列表中更改，也最好隐藏在第二个下拉列表中直到第一个下拉列表被选中。

Atm，我可以选择第一个控制器，但我不知道如何连接两个下拉菜单。

任何帮助将不胜感激。提前谢谢

新测试服务

export default class newtest {
    constructor($http){
        'ngInject';

        this._$http = $http;
        let testData = this;


        this.options = {
            releases: [
                {value: 1, name: 'R1', environments : ['R1-QA1', 'R1-QA2']},
                {value: 2, name: 'R2', environments : ['R2-QA1', 'R2-QA2']},
                {value: 3, name: 'R3', environments : ['R3-QA1', 'R3-QA2']}
            ],
            environments : [
            ['R1-QA1', 'R1-QA2'],
            ['R2-QA1', 'R2-QA2'],
            ['R3-QA1', 'R3-QA2']
            ]
        };
    }
}

新测试控制器

class NewTestCtrl {
  constructor(NewTest, $state, $http) {
    'ngInject';

    this._NewTest = NewTest;
    this.options = this._NewTest.options;


    this.releaseValues = this.options.releases.name;
    this.envValues = [];
    }

HTML

        <fieldset>
          <select ng-model="release" ng-options="release.name for release in $ctrl.options.releases">
            <option value="" disabled selected>Select</option>
            <option value="value">{{name}}</option>
          </select>
        </fieldset>

        <fieldset>
          <select ng-model="release" ng-options="env for environments in $ctrl.options.environments">
            <option value="" disabled selected>Select</option>
            <option value="env">{{env}}</option>
          </select>
        </fieldset>

Answer 1

首先，你的两个选择元素都有ng-model =＆＃34; release＆＃34;。这是它在控制器中绑定的数据字段。第二个选择元素应该类似于ng-model =＆＃34; environment＆＃34;。

您应该能够根据所选的版本更改环境列表，方法是使用发布数据元素，例如ng-options =＆＃34; env for $ ctrl.options.releases中的环境[释放] .environments＆＃34;

最后，您可以隐藏环境选择，直到根据具有值的版本选择具有ng-Show属性的版本。像ng-Show =＆＃34; release＆gt; 0＆＃34;并在构造函数中将release初始化为0.

Answer 2

感谢@Jim Moore的帮助，我找到了一个很好的小提琴链接，我遵循指南https://jsfiddle.net/annavester/Zd6uX/

我将数据的json更改为＆gt;

        environments : {
            'Release 1' : ['R1-QA1', 'R1-QA2'],
            'Release 2' : ['R2-QA1', 'R2-QA2'],
            'Release 3' : ['R3-QA1', 'R3-QA2']
        }

以及html to，对于将来遇到同样问题的任何人，我希望这会有所帮助。

        <fieldset>
          <select id="release"
                  ng-model="$ctrl.release"
                  ng-hide="!$ctrl.browsers"
                  ng-options="release for (release, environments) in $ctrl.environments">
            <option value="" disabled selected>Select</option>
          </select>
        </fieldset>


        <fieldset>
          <select id="environment"
                  ng-model="$ctrl.environment"
                  ng-hide="!$ctrl.release"
                  ng-options="environment for (release, environment) in $ctrl.release">
            <option value="" disabled selected>Select</option>
          </select>
        </fieldset>

Angularjs在两个下拉列表上过滤值

2 个答案: