Question

我是一个角色的新手，并且有一些麻烦来弄清楚如何以正确的方式使用ng-model中的值。
我制作了两个下拉列表，并希望在这两个列表之间建立依赖关系。应显示第二个列表，具体取决于第一个列表的用户输入。在这种情况下，用户应选择啤酒的发酵类型（此处为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'}
];});

这是我在这里的第一篇文章，所以我很感谢每一条建议都能提高这篇文章的质量。另外，请原谅我的英语不好。

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

只需执行以下步骤：

对两个选择使用相同的控制器。
创建一些$ scope变量来保存第一个选择的条件。（例如$ scope.selectedBeer）
设置第二个选择的条件i ng-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？

3 个答案: