Выберите несколько отображаемых имена вместо идентификаторов с помощью AngularJS

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> 

Значения являются Идентификаторами для этих продуктов (и это переключатель генерируется с использованием PHP)

& I «ве получил этот простой код в моем app.js файле:

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

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

}); 

Когда я отображения listProds как это {{listProds}}, I получить массив, содержащий текущие выбранные элементы, но он показывает только идентификаторы, если я выберу их все ["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] }} и отображения идентификатора продукта, я хочу отобразить там Название продукта.

Заранее спасибо.

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>