首先,感谢你们所有人!
我有这个plunker-> http://plnkr.co/edit/N2bs5xqmtsj3MmZKEI25?p=info 用户选择所有三个值,然后启用“添加”按钮进行添加。
点击后,使用ng-repeat显示所选条目。我还添加了每行的删除按钮按钮。在这种情况下,如何确保删除功能正常工作。 ?即如果我点击删除,则只删除该特定行。
其次,如果你在第一次添加时注意到,第一行上方会显示一个删除按钮。我怎么能删除它?
我还想将所选文件保存在控制器中,以便将这些数据提供给后端。我怎么知道用户选择了哪些选项。
这里是plunker代码 - HTML
<div ng-controller="Controller">
<form name="form" novalidate>
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)" ng-model="document" valid-file required>
<select name="singleSelect" ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray" required>
<option ng-if="contentarray.length > 1" value="" selected>Choose</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array" required>
<option ng-if="content1array.length > 1" value="" selected>Choose</option>
</select>
<button ng-click="addItem()" ng-disabled="disableAdd || (form.$invalid && (!form.$valid && 'invalid' || 'valid'))">Add</button>
</form>
<div ng-repeat="item in items" ng-show="isvisible">
<a>{{item.name}}</a>
<a>{{item.content}}</a>
<a>{{item.content1}}</a>
<button ng-click="deleteItem()">Delete</button>
</div>
</div>
JS代码
var app = angular.module('Select', []);
app.controller('Controller', function($scope, $timeout) {
/* for adding optional file based selection values selected by the user*/
$scope.isvisible = false; /* display 1st line when user clicks on add button*/
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1: ''
}
$scope.fileNameChanged = function (el) {
$scope.activeItem.name = el.files[0].name
}
$scope.addItem = function () {
$scope.isvisible = true;
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
}
$scope.activeItem = {} /* reset active item*/
angular.element("input[type='file']").val(null); /* To clear the input type file selected for next selection*/
}
/* for showing select options and enabling add button only when both the options are selected*/
$scope.content = {};
$scope.content1 = {};
$scope.contentarray = ['2', '3'];
$scope.content1array = ['12', '121', '1233', '1211'];
$scope.trigger = function () {
$timeout(function () {
$('form.bad select').trigger('change');
})
}
});
答案 0 :(得分:1)
我指的是您的deleteItem()
和delete-button
- 问题:
您必须在控制器中实施deleteItem()
方法。当您从模型ng-repeat
中删除项目时,ìtems
会自动更新您的列表,而不需要angular.element
。这是有效的,因为Angular中的双向数据绑定。
为您的ìtems
添加一个ID,然后使用它来删除模型中的项目,例如:
$scope.addItem = function() {
//...
$scope.activeItem.id = $scope.items.length;
$scope.items.push($scope.activeItem);
//...
}
$scope.deleteItem = function(item) {
$scope.items.splice(item.id, 1);
}
在ng-repeat
中,您需要按照以下方式定义按钮:
<button ng-click="deleteItem(item)">Delete</button>
您的另一个问题是附加的delete
- 按钮:显示,因为您使用空元素初始化模型ìtems
。相反地初始化,并且不会显示按钮:
$scope.items = [];
希望有所帮助