角度生成一个空的<选项>

Angular generating an empty <option>

本文关键字：一个 选项      更新时间：2023-09-26

我正在使用ng-repeat目录生成一些<option>元素。使用ng-repeat而不是ng-options是有意为之。

但是，除了实际数组之外，它还会生成一个空选项。代码如下：

<select name="type" class="form-control" ng-model="selected_type" ng-change="select_change()" >
    <option ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>
$scope.types = [
    {value: '1', name: 'Sale'}, 
    {value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;

还有一个小提琴：http://jsfiddle.net/HB7LU/521/

这是一个工作小提琴，使用 ng-options

http://jsfiddle.net/HB7LU/527/

<select ng-model="selected_type" ng-change="select_change()" ng-options="c.name for c in types">

然后在脚本上.js：

$scope.selected_type = $scope.types[0];

话虽如此，由于您只是部分使用了angularjs，因此您可以在实际发布之前将数据映射到数组中，例如在PHP中发布。

尝试ng-options，而不是让选项标记自己：

<div ng-controller="MyCtrl">
    <select ng-model="selected_type" ng-change="select_change()" ng-options="type.value as type.name for type in types">
    </select>
</div>

http://jsfiddle.net/aBPdv/

var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
    $scope.types = [
    {value: '1', name: 'Sale'}, 
    {value: '2', name: 'Other'}
    ];
    $scope.selected_type = $scope.types[0].value;
    $scope.select_change = function(x){
        alert($scope.selected_type);
    }
}

只需在选项标签上使用 ng-model 属性，而不是在选择标签上使用（在定义 ng-repeat 的地方使用它），如下所示： 

<select ng-change="select_change()">
    <option ng-model="selected_type" ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>

然后更改您的

$scope.selected_type = $scope.types[0].value;

自

$scope.selected_type = $scope.types;

但是您的 ng-change 将不起作用，因为没有设置 ng-model 属性，因此没有将 ngModelController 分配给此元素。

因此，如果您想知道选择的值何时更改，则必须对选择元素执行指令。

由于所有这些原因，ng-options 总是，我说总是选择输入使用的正确方向。

相关文章：