Question

我想引用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"];



        });

Answer 1

首先，在您的选择而不是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设置为等于newVal的{{1}}

这应该根据选择的任何值触发$scope.sideVal。

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

偶然的事情，你只需要在每个页面定义一次你的控制器，除非你每次实例化时都做一些特定的事情。

我打字太快，确实犯了使用等号而不是冒号的错误，这已经得到纠正。

具有Angular的反应性下拉菜单

1 个答案: