4

我正在使用该目录生成一些<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/

4

3 回答 3

1

只需在您的选项标签上使用 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 分配给该元素。

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

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

于 2013-09-26T09:53:59.157 回答
1

这是一个工作小提琴，使用 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 发布之前将数据映射到数组中。

于 2013-09-26T10:27:10.900 回答
1

尝试 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);
    }
}
于 2013-09-26T10:28:38.300 回答