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 =＆＃34; c.isPWMUsed（idx）＆＃34;添加，使用户无法选择使用其他一个下拉列表选择的项目。

- 编辑2 -
所以真正的问题归结为＆＃34;有什么方法可以在选项来自ng-repeat时为select选择双向绑定工作？＆＃34;

另一个相同的案例，使用AngularJS docs on select

中的代码

如果我改变了这个标记

<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 -
这段代码似乎有用......

＆＃13;

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'
  }]
}]);

＆＃13;

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

＆＃13;

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-disabled。但ng-option比重复选项提供更好的支持。还有一些第三方指令可用于禁用ng-option中的选项。结帐this。这是使用ng-option的禁用选项的示例。

Answer 2

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

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

ng-model不绑定select元素中的ng-repeated选项

2 个答案: