0

我是角度的新手。我曾经有一个使用以下内容填充的选择框ng:repeat：

<select ng-model="selectedAddress" ng-change="handleStoredAddressClick2()"  id="address_dropdown">
    <option value="-1" selected="selected">Add a new address</option>
    <option ng:repeat="stored_address in address_dropdown" value="{{$index}}">{{stored_address.dropdown_display}}</option>
</select>

它生成的 HTML 如下所示：

<select id="address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
    <option value="? undefined:undefined ?"></option>
    <option selected="selected" value="-1">Add a new address</option>
     <option value="0" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
     <option value="1" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>

我有一个运行在ng-click：

$scope.handleStoredAddressClick2 = function () {
        var address = $scope.address_dropdown[$scope.selectedAddress];
        $scope.streetaddr = address.address
        $scope.search_near = address.zip;

        var disp_addr = address.address;
        if (address.address_two) {
            disp_addr += ', ' + address.address_two;
        }
        if (typeof disp_addr != 'undefined' && disp_addr.toTitleCase) {
            disp_addr = disp_addr.toTitleCase();
        }
        $scope.streetaddr = disp_addr;
        $scope.stored_addr_key = address.key;
        $scope.cityname = address.city;
        $scope.statename = address.state; 

        $scope.fetch();
    };

该函数的第二行获取了在属性{{$index}}中设置的值。ng:repeat value（因此，在这种情况下为 0 或 1。）

最近有人告诉我，您不应该使用它ng:repeat来填充选择框。你应该使用它ng-options。所以我将我的选择框更新为：

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown"  id="address_dropdown">
   <option value="-1" ng-selected="selected">Add a new address</option>
</select>

这是生成的 HTML：

<select id="address_dropdown" ng-options="a.dropdown_display for a in address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
    <option value="1">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>

本质上是一样的，尤其是期权价值。但是我现在在更改时遇到错误，说address is undefined. 因此，出于某种原因，$scope.address_dropdown[$scope.selectedAddress];即使无论代码如何生成，实际索引值都是相同的，也不再适用于在更改时获取下拉列表的选定索引值。

任何人都可以解释为什么会这样，以及如何获得填充的选择框的选定索引值ng-options？我是否还可以回答为什么我在第二组代码（下面重复）中设置的默认选定选项的文本最终显示为空白？

代码：添加新地址

渲染：

4

1 回答 1

2

我没有完全遵循这个例子，但看起来你正在尝试检索下拉列表中选择的地址？

所以你有这个：

ng-options="a.dropdown_display for a in address_dropdown"

还有这个：

ng-model="selectedAddress"

您的下拉列表绑定到 address_dropdown 的成员，因此此代码是不必要的：

var address = $scope.address_dropdown[$scope.selectedAddress];

$scope.selectedAddress应该已经包含作为 address_dropdown 成员的完整地址对象。无需为索引而烦恼。

于 2014-03-19T17:08:32.323 回答