How to get values on dynamically generated select box

Question

I am using following form to generate dynamic select box and on selecting value this is working property but it is not showing its value in another text box

it should show its value on text box and want to access $scope.taxes in addProduct method

code is as below

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>

How toachieve this?

Answer 1

I am not sure what you are trying to do, but if you want to select an object and put that object in the items,

1. the select ng-model should be the list item (set by position), not the list item's name property. That way the select control on each selection, change the list item at position $index to the newly selected tax item.

2. The input should reflect the list item's name property in ng-model, not the value.

Hopes this helps.

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>