Javascript 在angularjs中添加新输入
如何使用angularjs添加新的多个输入 我试过了，但不能用输入ng模型绑定ng repeat。我希望将selectedItems的ng repeat添加到Javascript 在angularjs中添加新输入,javascript,angularjs,Javascript,Angularjs,如何使用angularjs添加新的多个输入 我试过了，但不能用输入ng模型绑定ng repeat。我希望将selectedItems的ng repeat添加到中，但除非对其进行初始化，否则它无法工作 若我点击添加新产品按钮，新产品选择字段和新价格输入字段将显示如图所示 这是 这是我的html <!DOCTYPE html> <html ng-app="myApp"> <head> <script data-require
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<!-- <div class="item-text-wrap" ng-repeat="item in selectedItems"> -->
<div class="item-text-wrap">
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item)" class="col col-100"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>
{{selectedItems}}
</body>
</html>
为了从
itemsseletedItemsindexof指令ngRepeat新产品功能时，使用该指令一次又一次地创建Dom
这是更新的plunker和您的代码
希望这有助于查看此插件：因为我不知道您的完整对象详细信息，您仍然可以添加一些条件来验证项目
添加新产品
{{selectedItems}}
新增项目：
{{addedItems}}
如果需要更改，请告诉我。我花了很多时间来完成将新输入字段添加到图片中。它支持多个重复条目工作完美如我所愿。非常喜欢它。：-）
这可能不是最好的解决方案，但它完成了任务，我打算并希望对其他人有用
请提出更好的方法
通过angular.COPY（）
将项目复制到selectedItems
Push只是指针，指向普通地址。因此，它限制了selectedItems数据的完整性
（接受更好的建议和知识）
选择选项时，将selectedItems记录的selecteditem属性更改为selecteditem，以备将来使用
添加新产品或删除一个，随你所愿
仅选择所选属性
这是截图
这是
这里是html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<div class="item-text-wrap" ng-repeat="items in selectedItems">
<button class="remove" ng-click="removeChoice(items)">-</button>
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item, items)"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>
<button ng-click="addItems()">Add new Product</button> <br>
{{selectedItems}} <br><br>
<button ng-click="displaySelectedOnly()" ng-disabled="bool == false">futurepurpose</button> <br>
{{selectedItemsOnly}}
</body>
</html>
正确的Plunker链接你能再解释一下吗？你想实现什么？我想在selectedItems中添加项目，意思是不止一个项目。但我无法将selectedItems与项目绑定。请办理登机手续。我更新了链接。这意味着您希望在基于select标记的selected items数组中有多个项目。我说得对吗？如果是这样，在调用切换更改
功能注释出拼接
功能行时，我无法进行调整，用户需要在下一个输入字段中显示。这只是演示。项目对象中还有一些属性，比如输入日期，可能会有所不同。谢谢你的帮助，伙计。但我需要其他项目的输入字段。请看有问题的图片。我刚刚添加了。您需要像这样添加多少个输入字段和选择字段，以及select
tag3输入字段需要为记录添加哪些选项。如库存项目输入。输入项目、每个包裹的金额和到达日期。记录数将是动态的。谢谢，这很有帮助，但不能接受重复输入。无论如何，感谢您的帮助。：-）我现在明白了。谢谢你的帮助，伙计。但我需要其他项目的输入字段。请看有问题的图片。我刚才补充说。
<button ng-click="addProduct(item)">add new product</button>
<br />
{{selectedItems}}
<br />
<b>Added items:</b>
{{addedItems}}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<div class="item-text-wrap" ng-repeat="items in selectedItems">
<button class="remove" ng-click="removeChoice(items)">-</button>
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item, items)"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>
<button ng-click="addItems()">Add new Product</button> <br>
{{selectedItems}} <br><br>
<button ng-click="displaySelectedOnly()" ng-disabled="bool == false">futurepurpose</button> <br>
{{selectedItemsOnly}}
</body>
</html>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.selectedItems = [];
$scope.items = [{'id':1,'name':'apple', 'price': 100},
{'id':2,'name':'orange', 'price':75},
{'id':3,'name':'lemon', 'price':50}]
$scope.selectedItemsOnly = [];
$scope.bool = false;
$scope.toggleChange = function (item, items) {
angular.forEach(items, function(item){
if(!angular.isUndefined(item.selected) && item.selected === true){
item.selected = false;
}
});
item.selected = true;
$scope.bool = true;
};
$scope.addItems = function (items){
$scope.selectedItems.push(angular.copy($scope.items));
}
$scope.removeChoice = function (items){
$scope.selectedItems.splice($scope.selectedItems.indexOf(items), 1)
if($scope.selectedItem.length === 0) $scope.bool = false;
}
$scope.displaySelectedOnly = function(){
angular.forEach($scope.selectedItems, function(items){
angular.forEach(items, function(item){
if(!angular.isUndefined(item.selected) && item.selected === true){
$scope.selectedItemsOnly.push(item);
}
});
});
}
$scope.addItems($scope.items);
});