Question

我尝试使用ngHide / ngShow根据您在标签中选择的选项更改视图，但我似乎无法弄清楚如何使其工作。这是我目前的想法：＆lt; header class =＆＃34; hero-unit＆＃34; ID =＆＃34;旗帜＆＃34; NG-包括=＆＃34;＆＃39;部件/报头/了header.html＆＃39;＆＃34;＆GT;＆LT; /报头＆GT; ＆lt; div ng-include =＆＃34;＆＃39; components / navbar / navbar.html＆＃39;＆＃34;＆gt;＆lt; / div＆gt; ＆lt; div class =＆＃34; container＆＃34;＆gt; ＆lt; h3 class =＆＃34; site-headline＆＃34;＆gt; Opret nyt produkt＆lt; / h3＆gt; ＆LT; HR＆GT; ＆LT;形式＆GT; ＆lt; div class =＆＃34; container jumbotron＆＃34;＆gt; ＆lt; div class =＆＃34; col-md-12＆＃34;＆gt; ＆LT;选择＆GT; ＆lt; option ng-repeat =＆＃34;选项中的选项＆＃34;名称=＆＃34; chosenOption＆＃34;＆GT; {{option.name}} ＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆lt; div ng-show =＆＃34; {{option.name}} ==＆＃39; Pool＆＃39;＆＃34; NG-包括=＆＃34;＆＃39;新pool.html＆＃39;＆＃34;＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /形式＆GT; ＆LT; / DIV＆GT; ＆lt; footer class =＆＃34; footer＆＃34; NG-包括=＆＃34;＆＃39;部件/页脚/ footer.html＆＃39;＆＃34;＆GT;＆LT; /页脚＆GT; 我似乎无法访问{{option}}，这是有道理的，因为我已经超出了ng-repeat范围。我尝试制作这个方法： $ scope.setProduct = function（productName）{ $ scope.product = productName; 的console.log（$ scope.product）; }; 只需在select标签上调用ng-change，即可设置product.name = selectedOption。它确实打印出正确的$ scope.product，但它没有显示ng-include。我似乎无法绕过它，可以伸出援助之手。

Answer 1

您需要向ng-model添加<select>：

<div class="container jumbotron">
    <div class="col-md-12">
        <select ng-model="selectedOption">
            <option ng-repeat="option in options" name="chosenOption">
                {{ option.name }}
            </option>
        </select>
    </div>

    <div ng-show="selectedOption.name == 'Pool'" ng-include="'new-pool.html'"></div>

</div>

然后，选择中的ng-model将设置为当前选定的对象。

AngularJS ngHide和ngShow取决于<select>选项

1 个答案: