Question

我是角色的新人。我曾经有一个使用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的选择框的选定索引值？我还可以得到一个答案，为什么我在第二组代码（下面重复）中设置的默认选择文本的文本最终显示为空白？

代码：添加新地址

渲染：

Answer 1

我没有完全关注此示例，但看起来您正在尝试检索下拉列表中选择的地址？

所以你有这个：

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成员的完整地址对象。不需要用索引来搞清楚。

使用angularjs中的选择框（选定的索引和默认选项）

1 个答案: