Question

我使用ng-options创建了一个选择框，它从数据库中获取预先选择的值。

我的HTML：

<h3>Process:</h3>
<select class="form-control" 
        ng-options="p.procid as p.procname for p in processes track by p.procid" 
        ng-model="processSelected">
  <option value="">-- choose an option --</option>
</select>

我的控制器：

$scope.processSelected = $scope.processes[2];

现在，它在选择框中显示为MyProcess1，MyProcess2，MyProcess3等等。例如，如果默认值为MyProcess3，并且我想选择MyProcess1进程，则选择框将变为空白。当我在MyProcess1上第二次点击时，它会选择它。我没有找到任何理由进行双击。

请告诉我如何通过单击选择它。

Answer 1

我认为您对ng-options的查询过于复杂。首先，在track by p.procid中使用ng-repeat来删除<select>并不关心的重复项。其次，你的p.procid as p.procname打破了逻辑，因为它没有多大意义。

总体而言，您的代码应更改为ng-options="p.procname for p in processes"

这是一个工作演示（没有后端请求）：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.processes = [{
      "procid": 1,
      "procname": "AAA"
    },
    {
      "procid": 3,
      "procname": "BBB"
    },
    {
      "procid": 4,
      "procname": "CCC"
    },
    {
      "procid": 2,
      "procname": "DDD"
    },
  ];
  $scope.processSelected = $scope.processes[2];
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <h3>Process:</h3>
    <select class="form-control" ng-options="p.procname for p in processes" ng-model="processSelected">
      <option value="">-- choose an option --</option>
    </select>
    <p ng-show="processSelected">Selected: {{processSelected}}</p>

  </div>

</body>

</html>

＆＃13;

ng-options默认值需要双击才能选择值

我的HTML：

我的控制器：

1 个答案: