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

试试这个。

＆＃13;

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;
      });
  };
});

＆＃13;

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

＆＃13;

使用AngularJS

2 个答案: