Как получить значения в динамически генерируемом окне выбора

Question

Я использую следующую форму для создания динамического поля выбора и при выборе значения это рабочее свойство, но оно не отображается в другом текстовом поле

он должен показать свое значение в текстовом поле и хочет получить доступ к $ scope.taxes в методе addProduct

код, как показано ниже

var myApp = angular.module('myApp', []);
myApp.controller('productController', function ($scope, $http) {
    $scope.taxes = [
        {id: 43, name: "tex1", value: 2},
        {id: 46, name: "tex2", value: 5},
        {id: 47, name: "tex3", value: 4},
    ];
    $scope.items = [];
    $scope.newitem = '';
    $scope.addProduct = function () {
        //want to access all added items here
    }
 
    $scope.add = function () {
        if ($scope.items.length < 4) {
            $scope.items.push($scope.items.length);
        }
    }
    $scope.del = function (i) {
        console.log(i);
        $scope.items.splice(i, 1);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="productController">
<form class="from-control" name="addProductForm">
    <input type="button" class="btn btn-info" id="addTax" ng-click="add()"
           value="Add Tax">
        <div ng-repeat='item in items' class="margin-top:10px;margin-bottom-10px;">
            <div class="col-lg-6 col-md-6">
                <select name="items[$index].name"
                        ng-model="items[$index].name"
                        ng-options="e as e.name for e in taxes"
                        class="form-control" ng-required>
                </select>
            </div>
            <div class="col-lg-4 col-md-4">
                <input type="text" name="items[$index].value"
                       ng-model="items[$index].value" class="form-control"
                       ng-required="true"/>
                <input type="hidden" name="items[$index].value"
                       ng-model="items[$index].value" class="form-control" 
                       ng-required="true"/>
            </div>
            <div class="col-lg-2 col-md-2">
                <button type="button" class="btn btn-default btn-sm" 
                        ng-click="del($index)">
                    <span class="glyphicon glyphicon-minus"></span> REMOVE
                </button>
            </div>
        </div>
        <span id="sellingPriceLarge"></span>
        <button class=" form-control btn btn-success"
                ng-disabled="addProductForm.$invalid" 
                ng-click="addProduct()">Add Product</button>
    </form>
    </div>

Как этого добиться?

Answer 1

Я не уверен, что вы пытаетесь сделать, но если вы хотите выбрать объект и поместить этот объект в элементы,

1. выбранная ng-модель должна быть элементом списка (заданным по позиции), а не свойством name элемента списка. Таким образом, выберите элемент управления для каждого выбора, измените элемент списка в позиции $ index на недавно выбранную налоговую позицию.

2. Входные данные должны отражать свойство name элемента списка в ng-модели, а не значение.

Надеется, что это поможет.

var myApp = angular.module('myApp', []);
myApp.controller('productController', function ($scope, $http) {
    $scope.taxes = [
        {id: 43, name: "tex1", value: 2},
        {id: 46, name: "tex2", value: 5},
        {id: 47, name: "tex3", value: 4},
    ];
    $scope.items = [];
    $scope.newitem = '';
    $scope.addProduct = function () {
        //want to access all added items here
    }
 
    $scope.add = function () {
        if ($scope.items.length < 4) {
            $scope.items.push({});
        }
    }
    $scope.del = function (i) {
        console.log(i);
        $scope.items.splice(i, 1);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="productController">
<form class="from-control" name="addProductForm">
    <input type="button" class="btn btn-info" id="addTax" ng-click="add()"
           value="Add Tax">
        <div ng-repeat='item in items' class="margin-top:10px;margin-bottom-10px;">
            <div class="col-lg-6 col-md-6">
                <select name="items[$index].name"
                        ng-model="items[$index]"
                        ng-options="e as e.name for e in taxes"
                        class="form-control" ng-required>
                </select>
            </div>
            <div class="col-lg-4 col-md-4">
                <input type="text" name="items[$index].value"
                       ng-model="items[$index].name" class="form-control"
                       ng-required="true"/>
                <input type="hidden" name="items[$index].value"
                       ng-model="items[$index].value" class="form-control" 
                       ng-required="true"/>
            </div>
            <div class="col-lg-2 col-md-2">
                <button type="button" class="btn btn-default btn-sm" 
                        ng-click="del($index)">
                    <span class="glyphicon glyphicon-minus"></span> REMOVE
                </button>
            </div>
        </div>
        <span id="sellingPriceLarge"></span>
        <button class=" form-control btn btn-success"
                ng-disabled="addProductForm.$invalid" 
                ng-click="addProduct()">Add Product</button>
    </form>
    </div>