角度：选定值未保留在由ng-options生成的select中

Question

I have a dropdown generated using ng-options

<select class="form-control"  ng-options="item.value as item.label for item in filterFields track by item.value" ng-model="selectedFilterField">
</select>

The problem is that when I select an option from this dropwon, the selected item appears as empty and an extra blank element is added to the dropdown. What am I doing wrong?

Edit: added controller code:

$scope.columns = accountColumns;

    $scope.filterFields = [];

    $scope.filterFields.push(defaultSelectOption);
    $scope.filterFieldValues.push(defaultSelectOption);

    var idx = 1;

    for(i=0; i < accountColumns.length; i++) {
        var option = {label: accountColumns[i], value: accountColumns[i]};
        $scope.filterFields.push(option);
    }
    $scope.selectedFilterField = $scope.filterFields[0];

Answer 1

Let's say your filterFields array has objects that look like this:

{
    name: "",
    value: 0
}

In your ng-options you tell angular that the possible values for the select is an array of these objects. But you also tell angular that when you select an option then the real value is the object.value; So now angular sees that this value is not present in the array of options and tries to add it or something.

Initially the dropdown works because you set the ng-model to a complete object present in the filterFields array.

Try it with this:

ng-options="item for item in filterFields track by item.value"