带有角度的反应式下拉菜单

Question

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

我特别想使用您从阶段开始的值来影响总部是否会显示在页面上。 让我知道是否需要澄清任何事情。

这是我的代码：

        <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.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的$scope.sideVal

那应该基于选择的任何值触发ng-show 。

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

几句话，除非您每次实例化它都要做特定的事情，否则您只需要为每个页面定义一次控制器即可。

我输入的速度太快了，确实犯了一个使用等号而不是冒号的错误，此问题已得到纠正。