我如何将 ng-model 中的值用于 ng-show？

Question

我是 angular 的新手，在弄清楚如何以正确的方式使用 ng-model 中的值时遇到了一些困难。
我做了两个下拉列表，想在这两者之间建立依赖关系。应显示第二个列表，具体取决于第一个列表的用户输入。在这种情况下，用户应 select 啤酒的发酵类型（此处 Obergärig 表示上层发酵），并且仅当用户选择 'Obergärig' 时才应显示第二个下拉列表。我用 ng-show 试过它，但它不起作用，我不知道为什么，甚至不知道我是否以正确的方式使用它。如果有人能给我一个简短的解释我做错了什么，我将不胜感激。

Html 第一个下拉列表：

<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>

Html 第二个下拉列表：

<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>

这是.js：

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});

app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});

这是我第一次 post 在这里，所以我很感谢每一个建议，以提高这个 post 的质量。另外，请原谅我的英语不好。

Answer 1

您的 select 必须由一个控制器管理。因此，您的代码应如下所示：

<div ng-controller="BierController">
    <select ng-model="Bierart" ng-options="art as art.name for art in arten">
        <option value="" disabled selected>Gärigkeit auswählen</option>
    </select>
    <div ng-show="Bierart === 'Obergärig'">
        <select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
            <option value="" disabled selected>Biersorte auswählen</option>
        </select>
    </div>
</div>

.js:

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});

Answer 2

只需执行以下步骤：

两个 select 使用相同的控制器。
创建一些 $scope 变量来保存第一个 select 的条件。（例如 $scope.selectedBeer）
设置第二个select的条件ing-show属性.

示例：

JS文件：

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];

$scope.selectedBeer = "";
});

HTML 文件:

<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>

<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>

我可能在编码时犯了一些语法错误 IDE，但主要思想已得到描述。祝你好运！

Answer 3

这是新的 html：

<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
                            <option value="" disabled selected>Gärigkeit auswählen</option>
                        </select>
                        </br>
                        {{selectedBeer.name}} 


                <div  ng-show="selectedBeer == 'Obergärig'">
                    <select ng-options="sorte as sorte.name for sorte in obere">
                        <option value="" disabled selected>Biersorte auswählen</option>
                    </select>
                    </br>
                    {{selectedBeer.name}}
                </div>

和 .js

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];

$scope.selectedBeer = "";
});

感谢您的建议，我会安装 ng-inspect FF。

我如何将 ng-model 中的值用于 ng-show？

How can i use values from ng-model for ng-show?

javascript

angularjs

drop-down-menu

angularjs-ng-options

angularjs-ng-show