Question

我正在使用以下表格生成动态选择框并选择值这是正常工作的属性，但没有在另一个文本框中显示其值

它应该在文本框中显示其值，并希望在addProduct方法中访问$ scope.taxes

代码如下

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

我不确定您要做什么，但是如果您想选择一个对象并将该对象放入项目中，

select ng-model应该是列表项（按位置设置），而不是列表项的name属性。这样，对每个选择的选择控件都将$ index位置的列表项更改为新选择的税项。
输入应在ng-model中反映列表项的name属性，而不是值。

希望这会有所帮助。

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>

如何获取动态生成的选择框上的值

1 个答案: