javascript - ng-repeat 适用于 、 等，但使用完全相同的源进行选择时失败

Question

此处显示了用于根据移动操作系统选择填充常见手机和平板电脑型号列表的应用程序的一部分:

<div class="input-field col s3">
                <label class="active">Environment (OS)</label>
                <select ng-model="environment" ng-change="listBrowsers()">
                    <option value="" disabled>Select an OS</option>
                    <option ng-repeat="OS in OSes">{{OS}}</option>
                </select>
            </div>

以及用于上下文的 $scope.listBrowsers() 片段(来自 Controller )....

$scope.listBrowsers = function() {
    $scope.browsers = MachineDataService.getBrowsers($scope.environment);
    $scope.browser1 = null;
    $scope.notMobile(); //calls another function to determine mobile-ness
    $scope.getMobileDevices($scope.environment);
    return $scope.browsers;
}

接下来，“getMobileDevices”作用域函数调用类似命名的服务方法:

this.getMobileDevices = function(envt) {
    var deviceList = [];
    for (i=0; i < _devices.length; i++) {
        if (_devices[i].versions.indexOf(envt) > -1) {
            deviceList.push(_devices[i].name);
        }
    }
    return deviceList;

}

但是问题就出现在 View 的变化上:

这有效--

<div class="input-field col s6">
                <label class="active">Phone/Tablet Model:</label>
                <p ng-repeat="device in mobileDevices">{{device}}</p></div>

这不会:

<div class="input-field col s6><select ng-model="mobileDeviceType">
                    <option value="" disabled selected>Choose a device...</option>
                    <option ng-repeat="device in mobileDevices" value="{{device}}">{{device}}</option>
                </select></div>

事实上，即使用单选按钮替换选择也有效 - 来自相同的来源!

注意我承认我可能错过了一些东西——Angular 对我来说仍然有些陌生。请原谅使用 Materialize 而不是 Angular Material——我稍后可能会重写以使用 Angular Material，但一开始并不知道它的存在。

编辑——为了帮助说明这一点，下面是使用重复器的段落结果的屏幕截图，以及使用 ng-options 进行选择的结果屏幕截图。

sample-with-ngoptions sample-with-paragraph-ngrepeat

Answer 1

有趣的是，它在这里对我有用!我采用了您提供的相同代码片段并制作了这个演示，它工作正常。您可以检查一下您是否在做同样的事情吗？

尽管您提供的代码中有语法错误<div class="input-field col s6><select ng-model="mobileDeviceType">

将其更改为 <div class="input-field col s6"><select ng-model="mobileDeviceType">你错过了"在类属性的末尾

var adminPage = angular.module("adminPage", []);
adminPage.controller('adminPage1', function($scope, $http, $window) {



  $scope.mobileDevices = ['Apple', 'HTC', 'Samnsung', 'One plus'];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="adminPage" ng-controller="adminPage1" class="input-field col s6">
  <select ng-model="mobileDeviceType">
    <option value="" disabled selected>Choose a device...</option>
    <option ng-repeat="device in mobileDevices" value="{{device}}">{{device}}</option>
  </select>
</div>