如何使这个简单的 AngularJS 1.0.2 ng-options 示例在 1.4.2+ 中工作？

Question

在此示例中，我从另一个对象中的对象数组填充 select 选项。 selected 值也保存在此对象中：

function QuarterController($scope) {
    $scope.MyData = {
        Quarter: 2,
        QuarterArray: [{
            'value': 1,
            'text': 'Q1'
        }, {
            'value': 2,
            'text': 'Q2'
        }, {
            'value': 3,
            'text': 'Q3'
        }, {
            'value': 4,
            'text': 'Q4'
        }],
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
     <h2>AngularJS ng-options Demo</h2>
    <p>Works in AngularJS 1.0.2 but not in 1.4.2.</p>
    <div ng-controller="QuarterController">
        <select name="quarter" ng-model="MyData.Quarter" ng-options="obj.value as obj.text for obj in MyData.QuarterArray">
            <option value="">Please select...</option>
        </select>
        <div>Quarter Selected: {{MyData.Quarter}}</div>
    </div>
    <p>What must I change to make this work in the latest AngularJS 1.*?</p>
</div>

如果您将 AngularJS 库从 1.0.2 更改为 1.4.2，它将停止工作。我必须怎么做才能在最新的 1.4.* 或 1.5.* 版本中运行此功能？

（感谢 BruteCode 这个例子的来源）

Answer 1

AngularJS 1.3 默认禁用全局变量作为控制器。你有两个选择。对于它们两者，您必须将 ng-app 模块的名称添加到您的 html 文件中：

    <div ng-app="myApp">
    </div>

要么使用新语法

将此添加到您的 js 文件的底部
```
angular.module('myApp', []).controller('QuarterController', QuarterController);
```
工作fiddle：https://jsfiddle.net/hp97e5ek/8/

或启用该功能

angular.module('myApp', []).config($controllerProvider) {
    $controllerProvider.allowGlobals();
});

工作fiddle：https://jsfiddle.net/hp97e5ek/9/

如何使这个简单的 AngularJS 1.0.2 ng-options 示例在 1.4.2+ 中工作？

How to make this simple AngularJS 1.0.2 ng-options example work in 1.4.2+?

angularjs

ng-options