Question

我正在努力使用下拉列表，请参阅下面的代码

我的控制器

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };

    $scope.data.model=1;

 }]);
})(window.angular);

我的用户界面

<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>

以下是demo，在此演示中，我将$scope.data.model设置为1，然后为什么我的下拉列表显示为空白..

我搜索过并尝试了很多，但没有运气，请帮忙。提前谢谢，抱歉我的英语不好。

编辑注意：之前我曾尝试this，但仍面临此问题。

Answer 1

您的对象ID为string，而您的data.model为number。

统一您的数据类型，它会起作用。

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
    
    $scope.data.model='1';
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-ngrepeat-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>

请参阅AngularJS official documentation

上的示例

Answer 2

使用ng-value

更改选择中的值

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="option in data.availableOptions" ng-value="{{option.id}}">{{option.name}}</option>
</select>

Updated Plunker

Answer 3

gcc

更多信息：https://docs.angularjs.org/api/ng/directive/ngOptions

如果您想选择一个选项：

<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in  data.availableOptions track by option.id" ></select>

或使用对象的属性选择

$scope.data.model= $scope.data.availableOptions[1]; // 1 ==> index of the option you want to select

Answer 4

角度ng-repeat的最佳做法是使用ng-options进行选择。为了进行默认选择，我们需要在控制器中将ng-model值指定为选项对象本身。即，ng-model和重复选项的数据类型必须与exact相同。

让我们将其指定为

$scope.data.model = $scope.data.availableOptions[0];

以下是您问题的工作示例。

＆＃13;

(function (angular) {
    'use strict';
    angular.module('ngrepeatSelect', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.data = {
                model: null,
                availableOptions: [{id: '1', name: 'Option A'},
                    {id: '2',name: 'Option B'},
                    {id: '3',name: 'Option C'}]
            };

            $scope.data.model = $scope.data.availableOptions[0];

    }]);
})(window.angular);

＆＃13;

<body ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect"> Repeat select: </label>
            <select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in data.availableOptions track by option.id">
            </select>
        </form>
        <hr>
        <tt>model = {{data.model}}</tt>
        <br/>
    </div>
</body>

＆＃13;

在angularjs中未选择默认选项下拉列表

4 个答案: