2

我是角度方面的新手，很难弄清楚如何以正确的方式使用来自 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'}
];});

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

4

3 回答 3

0

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

<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'}
];});
于 2016-01-12T13:59:12.220 回答
0

只需执行以下步骤：

  1. 对两个选择使用相同的控制器。

  2. 创建一些 $scope 变量来保存第一次选择的条件。（例如 $scope.selectedBeer）

  3. 设置第二个选择的条件显示属性。

例子：

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 的情况下编写代码时犯了一些语法错误，但主要思想已被描述。祝你好运！

于 2016-01-12T13:59:41.503 回答
0

这是新的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。

于 2016-01-12T17:16:09.320 回答