ng-model未绑定到select元素中ng重复的选项

Question

当在ng-repeat中使用ng-model时，我似乎以某种方式只能实现数据绑定的一种方式。

当前，如果用户从下拉菜单之一中进行选择，则会更新模型。 但是由于某些原因，选择并不会绑定到模型中的更改。

<body ng-controller="MainCtrl as c">
  <table>
      <tr ng-repeat="controller in c.data">
        <td>
          <select ng-model="controller.port" required="" class="form-control form-control-inline">
            <option value="">Choose a port</option>
            <option value="{{idx}}" ng-repeat="idx in c.pwm" ng-disabled="c.isPWMUsed(idx)">
              {{idx}} {{c.isPWMUsed(idx)? 'used' : ''}}
            </option>
          </select>
        </td>
      </tr>
  </table>
  <pre>
{{c.data | json:4}}
  </pre>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    this.data = [
        {
            "port": 1
        },
        {
            "port": "2"
        },
        {
            "port": ""
        },
        {
            "port": "5"
        }
    ];
    this.pwm = [0,1,2,3,4,5,6,7,8,9];

    this.isPWMUsed = function (n) {
        var out = false;
        n=n.toString();
        for (var i = 0; i < this.data.length; i++) {
            if (this.data[i].port === n) {
                out = true;
                break;
            }
        }
        return out;
    };

    $scope.gettypeof = function(item){
        return (typeof item);
    };
});

这是一个小问题： http ://plnkr.co/edit/QlEP73aZwhjcjRGszbJb?p=preview注意默认数据如何预先分配了一些端口。 但是，它们似乎并没有正确地绑定到下拉菜单。

-编辑-
我不使用ng-options的原因是因为我不知道选择选项时如何禁用它们。 请注意，该功能添加了ng-disabled =“ c.isPWMUsed（idx）”，使用户无法选择已通过其他下拉菜单之一选择的项目。

-编辑2-
因此，真正的问题归结为“当选项来自ng-repeat时，有没有办法使select的双向绑定起作用？”

另一种相同的情况，在选择时使用AngularJS文档中的代码

如果我更改这部分标记

<select ng-model="myColor" ng-options="color.name for color in colors">
  <option value="">-- choose color --</option>
</select>

到这点标记

<select ng-model="myColor">
  <option value="">-- choose color --</option>
  <option value="{{idx}}" ng-repeat="(idx, color) in colors">{{color.name}}</option>
</select>

中间选择上的数据绑定停止工作。 有没有办法使用ng-repeat而不是ng-options使数据绑定起作用？

-编辑3-
该代码似乎有效...

 var myApp = angular.module('myApp', []); myApp.controller('AppCtrl', ['$scope', function AppCtrl($scope) { $scope.filterCondition = { operator: 'eq' } $scope.operators = [{ value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah' }, { value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada' }] }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script> <body ng-app="myApp" ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator}}</div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> </select> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> </select> <input ng-model="filterCondition.operator"> </body>

Answer 1

分叉您的plnkr

<select ng-model="controller.port" required="" class="form-control form-control-inline"  ng-options="item as (item + (c.isPWMUsed(item)?'used' : '')) for item in c.pwm">
                    <option value="">Choose a port</option>
                </select>

我使用了ng-value而不是value。 价值以某种方式不起作用
初始字符串值也不起作用。 如果将初始值设置为字符串，则它不起作用。 （不知道为什么吗？）
如果要使用ng-option，则不会禁用ng。 但是ng-option比重复执行option可以提供更好的支持。 在ng-option中也可以使用一些第三方指令来禁用option。 签出这个。 这是禁用选项与ng-option一起使用的示例。

Answer 2

@dhavalcengg有一个解决方案，但是它不允许禁用选定的选项。

事实证明，我只需要在选项中添加一个ng-selected属性，以强制它在已设置预定义值时进行选择。

ng-model未绑定到select元素中ng重复的选项

问题描述

2 个解决方案

解决方案1
0 2015-01-07 05:53:00

解决方案2
0 2015-01-07 17:34:36

ng-model未绑定到select元素中ng重复的选项

问题描述

2 个解决方案

解决方案1 0 2015-01-07 05:53:00

解决方案2 0 2015-01-07 17:34:36

解决方案1
0 2015-01-07 05:53:00

解决方案2
0 2015-01-07 17:34:36