在选择标签上有ng-model问题，但没有其他问题

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

本文关键字：问题 其他 ng-model 选择 标签      更新时间：2023-09-26

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

/* 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语句的标记。同样，当模态弹出窗口出现时，除了选择框之外，所有内容都将根据模型正确填写。没有选择通道。我可以在调试器中确认通道正在通过选择框更改，如果我选择一个通道，然后查看它已更改的txUnitForPopup.channel。然而，在视图中，选择框从来没有像其他表单元素那样，在modal第一次出现时预先填充一个被选中的选项。

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

您需要使用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>

您可能想要在选择中尝试ng-options指令而不是ng-repeat。

例如:

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

请再看一下ng-options。这是官方文档中的一个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
-->

相关文章：