Javascript 使用AngularJS选择多个显示名称，而不是ID

我有一个多重选择，如下所示：

<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>

当我像这样{{listProds}显示

listProds

时，我会得到一个包含当前所选项目的数组，但如果我选择所有

[“10”、“25”、“35”、“48”]

，它只会像这样显示ID

{{p}{{listProds[$index]}

此代码生成两个文本框，用于输入从选择框中选择的每个产品的价格和数量。因此，与使用

{{p}}

或

{{listProds[$index]}}

并显示产品Id不同，我希望在那里显示产品名称

---

提前感谢。

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

$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

生成选项，而不是手动写出select中的每个选项。使用这种方法，基本上就是说每个选项都是一个对象，并且希望使用对象

值

作为显示名称

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

---

不确定输入的名称属性是什么，但我希望您能理解。

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

$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

生成选项，而不是手动写出select中的每个选项。使用这种方法，基本上就是说每个选项都是一个对象，并且希望使用对象

值

作为显示名称

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

不确定输入的name属性是什么，但我希望您能理解。

试试这个

var-app=angular.module（'selTest'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.selectedProducts=[]；
$scope.products=[
{id:1，名称：'POne'}，
{id:2，名称：'PTwo'}，
{id:3，名称：'PThree'}
];
$scope.getNames=函数（prods）{
返回产品图（功能（p）{
返回p.name；
});
};
$scope.getIds=函数（prods）{
返回产品图（功能（p）{
返回p.id；
});
};
});

选定名称：{{getNames（selectedProducts）}
所选ID:{GetID（selectedProducts）}
试试这个


var-app=angular.module（'selTest'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.selectedProducts=[]；
$scope.products=[
{id:1，名称：'POne'}，
{id:2，名称：'PTwo'}，
{id:3，名称：'PThree'}
];
$scope.getNames=函数（prods）{
返回产品图（功能（p）{
返回p.name；
});
};
$scope.getIds=函数（prods）{
返回产品图（功能（p）{
返回p.id；
});
};
});

选定名称：{{getNames（selectedProducts）}
所选ID:{GetID（selectedProducts）}
我不能使用此选项，因为我不知道如何在您的示例中填充listProds，因为我的选择框是使用cakePHP框架自动填充的，我刚刚添加了ng-model。您有权访问PHP吗？您是否可以请求获取产品列表，而不是让PHP为您生成HTML？否则，您必须选择DOM元素才能获得显示名称，这不是一种有角度的方式。是的，我确实可以访问PHP，我想我只需要
$http.get（）
产品列表我不能使用此选项，因为我不知道如何填充示例中的listProds，因为我的选择框是使用cakePHP框架自动填充的，我刚刚添加了ng-model。您有权访问PHP吗？您是否可以请求获取产品列表，而不是让PHP为您生成HTML？否则，您必须选择DOM元素才能获得显示名称，这不是一种有角度的方式。是的，我确实可以访问PHP，我想我只需要
$http.get（）
产品列表谢谢你，但重点是不要使用
$scope.products
数组，因为我没有这个数组。Select multiple是使用cakePHP生成的，我不知道如何在这样的数组中获取它的内容。谢谢，但关键是不要使用
$scope.products
数组，因为我没有这个数组。Select multiple是使用cakePHP生成的，我不知道如何在这样的数组中获取它的内容。
<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>