Angular的反应式下拉菜单

Reactive Drop Down Menu with Angular

本文关键字：下拉菜单 反应式 Angular      更新时间：2023-09-26

我想引用ng-repeat中的所选项目，然后使用该值来确定是否会通过ng-show出现另一个下拉菜单。

我特别想使用相位的值来影响hq是否会出现在页面上。如果我需要澄清什么，请告诉我。

这是我的代码：

        <div ng-app="erasmus">
        <div class="col-sm-4">
        <div ng-controller="erasmusController">
        <center><h2>Phase:</h2></center>
        <center><select  id="phase" name="phase">
            <option ng-repeat="x in phase track by $index">{{x}}    
        </select></center>
        </div>
        </div>

        <div class="col-sm-4">
        <div ng-controller="erasmusController">
        <center><h2>Side:</h2></center>
        <center><select id="side" name="side">
            <option ng-repeat="x in side">{{x}} 
        </select></center>
        </div>
        </div>
        <div class="col-sm-4">
        <div ng-controller="erasmusController">
        <div ng-show="showHQ">
        <center><h2 id="hq">Is HQs OOS?:</h2></center>
        <center><select id="hq" name="hq">
            <option ng-repeat="x in hq">{{x}}   
        </select></center>
        </div>
        </div>
        </div>
        </div>
        <div class="col-sm-4">
        <input type="submit">
        </div>
        </form>
        </div>
        </body>
        <script>
        var app = angular.module("erasmus",[]);

        app.controller("erasmusController",function($scope){
        $scope.phase = ["Beggining","Middle","End"];
        $scope.side = ["Japanese","Allied"];
        $scope.showHQ = false;
        $scope.hq = ["Yes","No"];

        });

首先，在选择中使用ng-options而不是ng-repeat可能会更好。此外，如果您计划将select的值用于某个内容，则可能需要给它一个ng-model。

例如：

<select id="side" name="side" ng-model="sideVal" ng-options="item.value as item.label for item in side"></select>

此示例可能需要进行调整，因为您需要确保选项的值设置为true或false。这可能需要您的$scope.side阵列更多地参与（可能是一个对象阵列？即[{name: 'Japanese', value:false}, {name: 'Allied', value:true}]？）

一旦完成，您所需要做的就是将$scope.showHQ设置为新定义的$scope.sideVal（请参阅选择示例中的ng-model）。这可以通过$watch来完成，如下所示：

$scope.$watch('sideVal', function(newVal, oldVal){ if(newVal !== oldVal){ $scope.showHQ = newVal;}});

这基本上监视$scope.sideVal，并且当它改变（newVal !== oldVal）时，它将$scope.showHQ设置为等于$scope.sideVal 的newVal

这应该根据所选择的值触发ng-show。

编辑：增加了工作小提琴：https://jsfiddle.net/rmfg4460/1/

有两件事，你只需要在每页定义一次控制器，除非你每次实例化它时都在做一些特定的事情

我打字太快了，确实犯了用等号代替冒号的错误，这已经纠正了。

相关文章：