javascript - 使用 AngularJS 选择多个显示名称而不是 ID

Question

我有一个像这样的多重选择:

<select ng-model="listProds" multiple>
  <option value="10">product 1</option>
  <option value="25">product 2</option>
  <option value="35">product 3</option>
  <option value="48">product 4</option>
</select>

这些值是这些产品的 ID(此选择框是使用 PHP 生成的)

&我的 app.js 文件中有这个简单的代码:

var app = angular.module('myapp', []);
app.controller("PurchasesController", function($scope) {

    // Init products Array
    $scope.listProds = [];

});

当我像这样 {{ listProds }} 显示 listProds 时，我会得到一个包含当前所选项目的数组，但如果我选择所有项目，它只会显示这样的 Id [“10”，“25”，“35”，“48”]。

<fieldset ng-show="listProds.length > 0">
    <div data-ng-repeat="p in listProds track by $index">
        {{ p }} <!– Or –> {{ listProds[$index] }}
        <input type="text" name="pr{{ listProds[$index] }}" />
        <input type="text" name="qt{{ listProds[$index] }}" />
    </div>
</fieldset>

此代码生成两个文本框，用于输入从选择框中选择的每个产品的价格和数量。因此，我不想使用 {{ p }} 或 {{ listProds[$index] }} 并显示产品 ID，而是想在那里显示产品名称。

提前谢谢您。

Answer 1

您可以创建两个列表:一个列表用于您的所有产品，另一个列表用于选定的产品:

$scope.listProds = [
  { key: 10, value: 'Product 1' },
  { key: 25, value: 'Product 2' },
  { key: 35, value: 'Product 3' },
  { key: 45, value: 'Product 4' }
];

$scope.selectedProds = [];

现在，在标记中，您可以使用 ng-options 来生成选项，而不用手动写出选择中的每个选项。使用这种方法，您基本上是在说每个选项都是一个对象，并且您希望使用对象value 作为显示名称。

 <select ng-model="selectedProds" ng-options="prod.value for prod in listProds" multiple>

现在您的 $scope.selectedProds 数组将包含产品对象，而不仅仅是它们的键。现在您可以轻松显示名称了:

<fieldset ng-show="selectedProds.length > 0">
  <div data-ng-repeat="p in selectedProds track by $index">
    {{ p.value }}
    <input type="text" name="pr{{ selectedProds[$index] }}" />
    <input type="text" name="qt{{ selectedProds[$index] }}" />
  </div>
</fieldset>

不确定您想要输入的名称属性是什么，但我希望您明白。