javascript - 选择 AngularJS 选项

Question

我知道对此有很多问题，但我最烦人的是弄清楚 AngularJS 如何处理选择选项值以及选择哪个选项。我有一个简单的项目，我将其传递到模式窗口上。该项目包含template_id。我还有一个具有名称和 ID 的模板，我希望创建一个简单的选择，其中选择具有项目 template_id 值的选项:

<select name="templateId">
  <option value="8000">name</option>
  <option value="8001" selected>name 2</option>
</select>

现在使用 AngularJS 我这样做:

<select name="templateId"
    ng-model="domain.templateId"
    ng-options="t.template_id as t.name for t 
                in templates track by t.template_id">
      <option value="">Choose template</option>
 </select>

在 Controller 中，我设置“选定”值:

Data.get('templates').then(function(result) {
    $scope.templates = result;
});

$scope.domain = {
    template_id: item.template_id,
    templateId: { template_id: item.template_id }
};

我实际上已经达到了可以将 template_id 发送到 REST API 的程度，并且那里的响应为

template_id: 8000

但是，选择元素中有一些令人讨厌的小行为。我得到了我想要选择的项目，但是当我尝试选择另一个选项时，它会将所选选项切换到预设的“选择模板”选项，但该值或“实际所选项目”仍然是原始的“所选”值我在 Controller 中设置。我可以在 REST API 响应中看到它。但这不是我选择的。在这个最初的错误之后，它继续按预期工作，但我怎样才能摆脱这个问题？

Answer 1

这是解决您的问题的示例。

angular.module('app.select', [])
  .controller('SelecetCtrl', function($scope) {
    $scope.templates = [{
      template_id: 1,
      name: 'tst1'
    }, {
      template_id: 2,
      name: 'tst2'
    }, {
      template_id: 3,
      name: 'tst3'
    }];

    $scope.selected = {
      template: {
        template_id: 2
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app.select'>
  <div ng-controller='SelecetCtrl'>
    <select name="templateId" ng-model="selected.template" 
            ng-options="t as t.name for t 
                in templates track by t.template_id">
      <option value="">Choose template</option>
    </select> 
  </div>
</div>