AngularJS:下拉框绑定在Google Chrome中不起作用

AngularJS: drop-down box binding doesn't work in Google Chrome

本文关键字：Google Chrome 不起作用 绑定 AngularJS      更新时间：2023-09-26

下面是一个使用AngularJS的简单表单。

在FireFox(30.0)和IE(11.0.9600.17207)中，如果我在下拉框中选择"Yes, No, No"，它会显示我期望的"true, false, false"。

Chrome (36.0.1985.125 m)显示"true, true, true"

有谁知道我做错了什么吗?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var testApp = angular.module( 'testApp', [] );
        testApp.controller( 'Ctl1', [
            '$scope',
            function ( $scope ) {
                $scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];
                $scope.submit = function () {
                    var results = [];
                    angular.forEach( $scope.questions, function ( v, k ) { results.push( v.value ); } );
                    console.log( results );
                    $scope.results = results;
                }
            }] );
    </script>
</head>
<body>
    <div ng-controller="Ctl1">
        <h1>Page 1</h1>
        <form ng-submit="submit()">
            <p ng-repeat="item in questions">
                <select ng-model="item.value">
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
            </p>
            <p>
                <button type="submit">Submit</button>
            </p>
        </form>
        <h1>Page 2</h1>
        <p ng-repeat="item in results track by $index">{{ item }}</p>
    </div>
</body>
</html>

试着从绑定的角度来看它，这样更容易看到发生了什么。

小提琴

{{questions}}

我能够简化示例并找到一个解决方法。

下面是简化后的代码: 
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var testApp = angular.module( 'testApp', [] );
        testApp.controller( 'Ctl1', [
            '$scope',
            function ( $scope ) {
                $scope.value = null;
            }] );
    </script>
</head>
<body>
    <div ng-controller="Ctl1">
        <p>Value: {{ value }}</p>
        <select ng-model="value">
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
    </div>
</body>
</html>

复制步骤:

  1. 在Google Chrome中打开页面
  2. 使用键盘导航到下拉列表
  3. 按两次"向下箭头"

实时演示:http://jsfiddle.net/QBjkB/

为了解决这个问题，我将value初始化为空字符串:

function ( $scope ) {
    $scope.value = '';
}

并在下拉列表中添加空值选项:

<select ng-model="value">
    <option value="">---</option>
    <option value="true">Yes</option>
    <option value="false">No</option>
</select>

谢谢大家的想法!

相关文章：