使用 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 时，我得到一个包含当前选定项目的数组，但如果我选择所有 ["10","25","35","48"]，它只会显示这样的 Id。

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

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

Answer 2

试试这个。

var app = angular.module('selTest', []);

app.controller('MainCtrl', function($scope) {
  $scope.selectedProducts = [];
  $scope.products = [
    { id:1, name: 'POne' }, 
    { id:2, name: 'PTwo' }, 
    { id:3, name: 'PThree' }
  ];
  $scope.getNames = function(prods) {
      return prods.map(function(p) {
        return p.name;
      });
  };
  $scope.getIds = function(prods) {
      return prods.map(function(p) {
        return p.id;
      });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="selTest">
  <div ng-controller="MainCtrl">
    <select name="products" 
      class="form-control input-sm" 
      ng-model="selectedProducts" 
      ng-options="p.name for p in products track by p.id" 
      ng-style="{'width':'100%'}" multiple>
    </select>

    <div>Selected Names: {{ getNames(selectedProducts) }}</div>
    <div>Selected Ids: {{ getIds(selectedProducts) }}</div>
  </div>
</div>