angularjs 中的 Ng-options 显示从 json 中选择的值答案

【问题标题】：Ng-options in angularjs to show the selected value from the jsonangularjs 中的 Ng-options 显示从 json 中选择的值
【发布时间】：2018-02-08 13:30:06
【问题描述】：

我正在使用 Angular js 选择来显示类型为 json 数组的名称。使用下面的代码我可以在选择名称时显示名称，它存储一个 json 对象，该对象移动到下一页但是当我回来时到选择页面我想显示以前选择的名称，但它显示一个空字段；

HTML：

<select class="formSelect"
              ng-model="vm.product.farmer"
              ng-change="vm.fillStarted()"
              ng-options="farmer as farmer.name for farmer in vm.load.selectedFarmers">
                    <option value="" selected hidden />
                </select>

Ctrl：

vm.load.selectedFarmers = getFarmers();
function getFarmers () {
  farmers = [
    { name: 'Nidhin', id: 22 },
    { name: 'Sathish', id: 10 },
    { name: 'Kumar', id: 23 },
    { name: 'Rajkumar', id: 24 }
  ];
  return farmers;
}

当从第一页移动到第二页时，选择有一个对象，如 {name: 'Nidhin', id: 22 }

从第二页返回到第一页时，如何显示所选名称？

【问题讨论】：

我认为当您返回该页面时，您的ng-model vm.product.farmer 为空。尝试在某处使用{{vm.product.farmer}} 将其打印出来，以确保它具有值。

标签： javascript angularjs json select drop-down-menu

【解决方案1】：

您可以根据可以更改 ng-model 值的位置检查所选数据的位置

if (CommonService.isValid(vm.product.farmer)) {
    vm.currentPosition = vm.load.selectedFarmers.findIndex(function (item) {
      return item.id === vm.product.farmer.id;
    });
  } else {
    vm.currentPosition = -1;
  }
  vm.product.farmer = vm.load.selectedFarmers[vm.currentPosition];

试试上面的代码，看看能否解决你的问题。

【讨论】：