Question

我有一个使用ng-options（angular）的下拉列表。我选择了一个空值的默认选项。（因此它具有“选定”属性和与模型相同的值）

每当我向ng-options添加另一个元素（非空）时，如果模型具有空值（指向默认的空选项），则会自动选择新添加的选项。模型的值仍为空，但下拉列表现在会自动显示新添加的选项。我也尝试将默认选项设为“”而不是“”，但它仍然会做同样的更改。

不会自动选择任何保证新添加选项的方法吗？

`<select class="form-control section" ng-model="action.prop">
            <option value="" disabled selected>Select Property</option>
            <option ng-repeat="prop in tr.props| orderBy:prop.name"
            value="{{prop.name}}"> {{prop.name}} </option>
</select>`

Answer 1

试试这个：）

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selectedName" ng-options="x for x in names">

        </select>

        <p>{{selectedName}}</p>

        <button ng-click="add()">add</button>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.names = [""];
            $scope.selectedName = $scope.names[0]
            $scope.add = function() {
                $scope.names.push("new");
            }

        });
    </script>


</body>

</html>

Answer 2

在运行get下拉功能之前，您只需将控制器中的ng-model设置为以下内容即可。这样它将始终设置为默认值。

<强>控制器

$scope.action = {};
$scope.action.prop = '';

Answer 3

尽管罗斯的解决方案在我的案例中运作良好。如果我使用ng-options和过滤器，那么Nishant也是如此。

我决定在ng-repeat上使用ng-if =“prop.name！=''”。因为对我来说发生的事情是大约一秒钟，ng-repeat会有一个空名称的最新道具，并且作为ng-model =“”，它将该选项设置为选中。

<select class="form-control section" ng-model="action.prop">
        <option value="" disabled selected>Select Property</option>
        <option ng-if="prop.name != ''" ng-repeat="prop in tr.props| orderBy:prop.name"
        value="{{prop.name}}"> {{prop.name}} </option>
</select>

添加选项以自动选择

3 个答案: