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