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

Question

Somehow I seem to achieved only one way data binding when using an ng-model inside an ng-repeat. 当在ng-repeat中使用ng-model时，我似乎以某种方式只能实现数据绑定的一种方式。

Currently if the user makes a selection from one of the dropdowns, the model is updated. 当前，如果用户从下拉菜单之一中进行选择，则会更新模型。 But for some reason the selects are not binding to changes in the 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);
    };
});

Here is a plunker: http://plnkr.co/edit/QlEP73aZwhjcjRGszbJb?p=preview Notice how the default data has some ports preassigned. 这是一个小问题： http ://plnkr.co/edit/QlEP73aZwhjcjRGszbJb?p=preview注意默认数据如何预先分配了一些端口。 However they do not seem to be bound to the dropdowns properly. 但是，它们似乎并没有正确地绑定到下拉菜单。

-- Edit -- -编辑-
The reason I did not use ng-options was because I could not figure out how to disable options when they are selected. 我不使用ng-options的原因是因为我不知道选择选项时如何禁用它们。 Notice the functionality adding ng-disabled="c.isPWMUsed(idx)" adds, making it so that the user cannot select an item that has been selected with one of the other dropdowns. 请注意，该功能添加了ng-disabled =“ c.isPWMUsed（idx）”，使用户无法选择已通过其他下拉菜单之一选择的项目。

-- Edit 2 -- -编辑2-
So really the question boils down to "is there a way to make two way binding work for select when options come from ng-repeat?" 因此，真正的问题归结为“当选项来自ng-repeat时，有没有办法使select的双向绑定起作用？”

Another Identical Case, Using the code from the AngularJS docs on select 另一种相同的情况，在选择时使用AngularJS文档中的代码

if I change this bit of markup 如果我更改这部分标记

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

To this bit of markup 到这点标记

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

The data binding on the middle select stops working. 中间选择上的数据绑定停止工作。 Is there a way to make the data binding work using the ng-repeat and not ng-options? 有没有办法使用ng-repeat而不是ng-options使数据绑定起作用？

-- Edit 3 -- -编辑3-
This code seems to work... 该代码似乎有效...

 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

Forked your plnkr 分叉您的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>

I have used ng-value instead of value. 我使用了ng-value而不是value。 Somehow value is not working 价值以某种方式不起作用
Initial string value in also not working. 初始字符串值也不起作用。 If you set initial value as string, it is not working. 如果将初始值设置为字符串，则它不起作用。 (Don't know why?) （不知道为什么吗？）
If you want to use ng-option, then you will not have ng-disabled. 如果要使用ng-option，则不会禁用ng。 But ng-option gives you better support than repeat on option. 但是ng-option比重复执行option可以提供更好的支持。 There are some third party directive which you can use to disable option in ng-option also. 在ng-option中也可以使用一些第三方指令来禁用option。 Checkout this . 签出这个。 This is an example to disabled option working with ng-option. 这是禁用选项与ng-option一起使用的示例。

Answer 2

@dhavalcengg had one solution however it didn't allow for disabling selected options. @dhavalcengg有一个解决方案，但是它不允许禁用选定的选项。

As it turns out I just had to add an ng-selected attribute to the option to force it to select when the predefined value was already set. 事实证明，我只需要在选项中添加一个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