select 标签上的 ng-model 有问题，但没有其他地方

Question

我有一堆 ng-model 语句，它们都在工作，除了 select 标签上的那个。本质上，想象一个包含设备列表的页面，当一个被点击时，这个函数运行：

/* Opens the unit popup page for TX units */
this.openTxUnitPopup = function (row) {
    var txUnitForPopup = myScope.txUnits.find(function (unit) {
        return unit.mac == row.entity.mac;
    });

    $scope.config.txUnitForPopup = txUnitForPopup.clone();
    $scope.config.showTxPopup = true;
};

该函数旨在为模态对话框设置一些数据。带有 ng-model 语句的标记如下。同样，当出现模式弹出窗口时，除了 select 框外，所有内容都根据模型正确填写。 select 没有频道。我可以在调试器中确认通道正在被 select 框更改，如果我选择一个通道然后查看 txUnitForPopup.channel 它已更改。但是，在视图中，select 框永远不会像模态首次出现时的其他表单元素那样预先填充 selected 选项。

                <div class="form-column">
                    <span class="info-label">Part:</span>
                    <div class="my-form-control">{{config.txUnitForPopup.part}}</div>

                    <span class="info-label">MAC:</span>
                    <div class="my-form-control">{{config.txUnitForPopup.mac}}</div>

                    <span class="info-label">Channel:</span>
                    <select class="my-form-control" ng-model="config.txUnitForPopup.channel">
                        <option
                                ng-repeat="unit in myScope.txUnits"
                                value="{{unit.channel}}">{{unit.channel}}
                        </option>
                    </select>

                    <span class="info-label">Name:</span>
                    <input class="my-form-control" ng-model="config.txUnitForPopup.info.name">

                    <span class="info-label">Manufacturer:</span>
                    <input class="my-form-control" ng-model="config.txUnitForPopup.info.manufacturer">

                    <span class="info-label">Model:</span>
                    <input class="my-form-control" ng-model="config.txUnitForPopup.info.model">

                    <span class="info-label">Serial #:</span>
                    <input class="my-form-control" ng-model="config.txUnitForPopup.info.serial">
                </div>

Answer 1

您可能想尝试 select 中的 ng-options 指令而不是 ng-repeat。

例如：

<select ng-options="unit in myScope.txUnits" ng-model="config.txUnitForPopup.channel"> </select>

Answer 2

您需要使用 ng-selected 将先前选择的值设置为这样的下拉列表

                 <select class="my-form-control" ng-model="config.txUnitForPopup.channel">
                        <option
                                ng-repeat="unit in myScope.txUnits"
                                ng-selected="unit.channel == config.txUnitForPopup.channel"
                                value="{{unit.channel}}">{{unit.channel}}
                        </option>
                    </select>

Answer 3

请再看一下 ng-options。这是来自 official docs 的 plunkr（稍作修改）

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };
 }]);
})(window.angular);

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>  
  <button ng-click="data.selectedOption = data.availableOptions[1]">
    Set option B</button>
 
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

select 标签上的 ng-model 有问题，但没有其他地方

Having issues with ng-model on select tag, but nowhere else

javascript

angularjs

angular-ngmodel