Question

我有一个枚举（我使用TypeScript编写代码）：

export enum AddressType
{
    NotSet = 0,

    Home = 1,
    Work = 2,
    Headquarters = 3,

    Custom = -1,
}

然后在我的控制器中我有一个名为type的字段，我在其中设置了应该在select输入中选择的初始值（我将其设置为AddressType.Headquarters）。

最后，在我的HTML中，我提出以下内容：

<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>

除了一件事之外，一切似乎都运行良好：由于某种原因，Angular在更新所有绑定后最初都不会在选择中选择“3”（总部）。 Angular会创建一个额外的选项：

<option value="?" selected="selected"></option>

因此，由于某种原因，Angular无法确定在组合中选择的初始选项。

如果用户选择组合框的其他选项，则Ctrl.type会正确更新，因此绑定对该部分的工作正常。基本上我的问题只是最初应该选择的选项没有按预期选择。

我在这里错过了什么导致了这个问题？

Answer 1

发现问题：

Ctrl.getAddressTypes（）返回的数组是一个字符串数组：

["0", "1", "2", "3", "1"]

和Ctrl.type中存储的内容是类型编号。

AngularJS使用'==='运算符将提供给ng-options的数组与提供给ng-model的值进行比较。在这种情况下，3不等于“3” - 这就是为什么它不起作用。

Answer 2

我在使用数字ID时经常遇到这种情况。我的方法是添加''+以将其转换为字符串类型：

<select ng-options="''+u.id as u.name for u in users"

Answer 3

在函数中，如果添加以下代码并且从ng-init调用相同的代码，则问题也会得到解决。这将解决字符串比较问题。

<section id="intro" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ham-layer"></div>
                    <!-- <i class="fa fa-bars hamburger"></i> -->
                    <div id="nav-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <p id="_intro" class="text-center"></p>
                    <hr width=40%>
                    <p id="belowIntro" class="text-center"></p>
                </div>
            </div>
        </div>
    </section>

Answer 4

我发生了，因为你没有启动选定的值。尝试使用ng-init设置初始值：

<select ng-model="Ctrl.type" 
       ng-options="addressType for addressType in Ctrl.getAddressTypes()"
       ng-init="Ctrl.type = ..."
       ></select>

请参阅此演示版Fiddle，其中我们有2个具有和不带init值的组合。您可以看到一个组合HTML似乎：

<select ng-model="selectedItem1"
 ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
   <option value="?" selected="selected"></option>
   <option value="0">General</option>
   <option value="1">Super</option>
   <option value="2">Trial</option>
 </select>

正确的一个：

<select ng-model="selectedItem" 
        ng-options="selectedItem.name as selectedItem.name for selectedItem in values" 
        ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
   <option value="0">General</option>
   <option value="1" selected="selected">Super</option>
   <option value="2">Trial</option>
</select>

初始ng模型值未在select中设置

4 个答案: