angularjs - 如何获取动态生成的选择框的值
问题描述
我正在使用以下表单生成动态选择框,并且在选择值时这是工作属性,但它没有在另一个文本框中显示其值
它应该在文本框中显示其值,并希望在 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>
如何做到这一点?
解决方案
我不确定您要做什么,但是如果您想选择一个对象并将该对象放入项目中,
选择 ng-model 应该是列表项(按位置设置),而不是列表项的名称属性。这样,每个选择上的选择控件,将位置 $index 的列表项更改为新选择的税项。
输入应该反映 ng-model 中列表项的名称属性,而不是值。
希望这会有所帮助。
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>
推荐阅读
- javascript - Vue组件中的子值更改父值的问题
- angular - Jasmine:当测试返回 SPEC HAS NOT EXPECTATION 时?
- c# - ILogger 未注入 Durable Functions v2.0
- rundeck - Rundeck AD 身份验证问题,它给出了无效的用户名和密码
- java - for 循环的值未按正确顺序打印
- c# - 如何查看安装程序 Visual Studio 项目中检测到的依赖项来自何处
- android - 使用 singleTask 活动时清除 getIntent() 数据
- .net-core - .net:向 Paket 配置添加新源
- c++ - CppUnit:如何立即打印失败详细信息
- ms-access - 在 Power BI 列中查找最大值