AngularJS ng-show不工作

Question

我有以下代码：

<header class="hero-unit" id="banner" ng-include="'components/header/header.html'"></header>

<div ng-include="'components/navbar/navbar.html'"></div>


<div class="container">
    <h3 class="site-headline">Opret nyt produkt</h3> <hr>
    <form> 
        <div class="container jumbotron">
            <div class="col-md-12">
                <select ng-model="selectedOption">
                    <option ng-repeat="option in options">
                        {{ option.name }}
                    </option>
                </select>

            </div>

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

        </div>
    </form>
</div>

<footer class="footer" ng-include="'components/footer/footer.html'"></footer>

我试图在每次显示时显示ng- selectedOption == "Pool"，但即使ng-selectedOption == "Pool"条件不为真，也会显示ng-include。

我试过使用" ==='Pool'"和不使用'，但似乎都不起作用，我无法理解它。

Answer 1

您正在比较恰好是undefined == undefined的selectedOption.name == Pool。由于您设置ng-select的方式，您只想进行比较：

selectedOption === 'Pool'

参见this simple plunk。

Answer 2

要么将select的模型设置为selectedOption.name，要么将条件设置为ng-show="selectedOption == 'Pool'"。您的条件正在寻找一个与您为select设置的变量不同的变量(selectedOption与selectedOption.name)。(还请注意‘Pool’周围的引号)

我不确定，但您可能需要为您的option元素赋值。

Answer 3

我设法找到了我的问题

不知何故，我设法创建了一个空间，这样它就不会说

Pool

但它说

 Pool

从这一点更改：

<option ng-repeat="option in options">
    {{ option.name }}
</option>

要这样做：

<option ng-repeat="option in options">{{ option.name }}</option>

解决了我的问题。