Question

我正在使用<option>目录生成一些ng-repeat个元素。使用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/

Answer 1

只需在选项标签上使用ng-model属性，而不是在select标签上使用（在定义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。

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

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

Answer 2

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

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

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

然后在script.js上：

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

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

Answer 3

尝试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);
    }
}

Angular生成一个空的<option> </option>

3 个答案: