Question

我对Angular相当新，并想知道如何在插入后更新下拉列表并选择新值？

我尝试了以下内容：

<select class="form-control" ng-model="selectedCompany" ng-change="GetCompany()"
        ng-options="company.key as company.value for company in CompanyList">
     <option value="">Select a Company</option>
</select>

当第一页加载并且插入的数据返回到范围+它的ID时，这将填充公司列表。

要在不刷新页面的情况下添加新值，我尝试以下非工作（几乎）代码：

var key = $scope.company.id;
var value = $scope.company.name;

$scope.CompanyList.push({ key: value });

$scope.selectedCompany = $scope.company.id;

这似乎为下拉列表添加了一个值，但它显示为空白。它也没有选择空白值（应该是新的公司名称），任何帮助都将不胜感激。

Answer 1

似乎在创建新公司对象时，需要指定显示名称为value的属性。这是一个代码段：

＆＃13;

angular.module("myApp", [])
  .controller("testCtrl", function() {
    this.companyList = [{
      key: 1,
      value: "Company A"
    }];
    var ctrl = this;
    this.addCompany = function() {
      ctrl.companyList.push({key:2, value:"Company B"});
      ctrl.selectedCompany = 2;
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="testCtrl as ctrl">
  <select class="form-control" 
      ng-model="ctrl.selectedCompany" 
      ng-options="company.key as company.value for company in ctrl.companyList">
        <option value="" disabled>Select a Company</option>
  </select>
  <button ng-click="ctrl.addCompany()">
      Add company B and select it
  </button>
</div>

＆＃13;

Answer 2

好的，我们这里有什么？

您正在使用ngOptions指令创建选项，如下所示：ng-options="company.key as company.value for company in CompanyList"

这意味着数组$scope.CompanyList必须包含具有key属性的对象，该属性将设置为选项value属性，并且value将是选项显示值（或标签，如果您希望以这种方式调用它）。

您做错了什么：您添加了一个只包含一个名为key的属性的对象，并使用value变量设置其值：$scope.CompanyList.push({ key: value });

你应该如何修复它？你需要附加一个key和value的对象，如下所示：$scope.CompanyList.push({ key: key, value: value });

Answer 3

以下行推送一个对象，其属性名称“key”设置为value：

$scope.CompanyList.push({ key: value });

结果将是：

{'key': $scope.company.name}

您可以将其更改为：

$scope.CompanyList.push({key: key, value: value});

这将导致：

{ 'key': $scope.company.id, 'value': $scope.company.name }

插入后更新Angular下拉列表并选择新值

3 个答案: