Ng-repeat适用于< <ul>< light >等，但在选择完全相同的源时失败

ng-repeat works with <p>, <ul><li>, etc, but fails on select using exact same source

本文关键字：失败 light ul 适用于 Ng-repeat 选择      更新时间：2023-09-26

根据移动操作系统选择填充常用手机和平板电脑型号列表的部分应用如下:

<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()的一个片段用于上下文(来自控制器)....

$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;

}

但是问题出现在视图的结果变化中:

This works——

<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-ngoptionssample-with-paragraph-ngrepeat

有趣的是，它在这里为我工作!我采取了相同的代码片段，你已经提供并使这个演示，它的工作很好。你能检查一下你是否也在做同样的事情吗?

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

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

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>

相关文章：