当我删除文本字段时，只删除最后一个文本字段。后面的逻辑是什么。我无法理解这里发生的事情。我也是角度js的新手。这是我的js代码 -
function ItemController($q, $scope, $http) {
var item_id = document.getElementsByName('item_id')[0].value;
$http
.get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined, 'Process-Data': false}
})
.then(function(response){
data = response.data.item_category;
$scope.items = response.data.data;
});
$http
.get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined,
'Process-Data': false
}
})
.then(function(response) {
data = response.data.item_category;
$scope.items = response.data.data;
$scope.fullArr = []
var i = 0;
var a = 0;
angular.forEach($scope.items, function(item) {
$('#item_category_id_' + i++).kendoDropDownList({
optionLabel: "Select Category",
dataTextField: "text",
dataValueField: "value",
dataSource: data,
dataType: "jsonp",
index: 0
})
var dropdownlist = $("#item_category_id_" + a++).data("kendoDropDownList");
dropdownlist.value(item.item_category_id);
$scope.fullArr.push($http
.get("http://localhost:8000/api/item/get-item-name/" + item.item_category_id, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined,
'Process-Data': false
}
}));
});
sendReq()
});
function sendReq() {
var i = 0;
var a = 0
var b = 0;
$q.all($scope.fullArr).then(function(response) {
angular.forEach(response, function(item) {
data = item.data;
var item_id = $scope.items[b++].item_id;
$('#item_id_' + i++).kendoDropDownList({
optionLabel: "Select Item",
dataTextField: "text",
dataValueField: "value",
dataSource: data,
dataType: "jsonp",
index: 0
});
var dropdownlist = $("#item_id_" + a++).data("kendoDropDownList");
dropdownlist.value(item_id);
});
});
}
$scope.Append = function() {
$scope.items.push($scope.items.length);
console.log($scope.items);
var i = $scope.items.length - 1 ;
console.log(i);
$http
.get("http://localhost:8000/api/item/get-item-category-name", {
transformRequest: angular.identity,
headers: {'Content-Type': undefined, 'Process-Data': false}
})
.then(function(response){
data = response.data;
$('#item_category_id_' +i).kendoDropDownList({
optionLabel : "Select Category",
dataTextField: "text",
dataValueField: "value",
dataSource: data,
dataType: "jsonp",
index: 0
});
$('#item_id_' + i).kendoDropDownList({
optionLabel : "Select Item"
});
});
}
$scope.Remove = function(index) {
console.log(index);
$scope.items.splice(index, 1);
console.log($scope.items);
}
$scope.getItem = function (index) {
var value = $("#item_category_id_" + index).data("kendoDropDownList").value();
$http
.get("http://localhost:8000/api/item/get-item-name/" + value, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined, 'Process-Data': false}
})
.then(function(response){
data = response.data;
$('#item_id_' + index).kendoDropDownList({
optionLabel : "Select Item",
dataTextField: "text",
dataValueField: "value",
dataSource: data,
dataType: "jsonp",
index: 0
});
});
}
}
这是我的HTML代码 -
<div class="uk-grid uk-margin-large-top uk-margin-large-bottom" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<table class="uk-table">
<thead>
<tr>
<th class="uk-text-nowrap">Item Category</th>
<th class="uk-text-nowrap">Item </th>
<th class="uk-text-nowrap">Quantity</th>
<th class="uk-text-nowrap">Action</th>
</tr>
</thead>
<tbody>
<tr class="form_section" id="data_clone" ng-repeat="item in items track by $index">
<td>
<select id="item_category_id_@{{ $index }}" name="item_category_id[@{{ $index }}]" ng-model="item_category_id" ng-change="getItem($index)" required>
</select>
</td>
<td>
<select title="Select Item" id="item_id_@{{ $index }}" name="item_id[@{{ $index }}]" required>
</select>
</td>
<td>
<input type="text" class="md-input" placeholder="Enter Quantity" value="@{{ item.total }}" name="total[@{{ $index }}]" required />
</td>
<td class="uk-text-right uk-text-middle">
<span class="uk-input-group-addon">
<a ng-click="Remove($index)"><i class="material-icons"></i></a>
</span>
</td>
</tr>
<tr style="border-bottom: 0px;" class="form_section" id="data_clone">
<td>
</td>
<td>
</td>
<td>
</td>
<td class="uk-text-right uk-text-middle">
<span class="uk-input-group-addon">
<a ng-click="Append()"><i class="material-icons"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
很抱歉，我无法将您的问题详述为您所期望的新问题。 感谢...
答案 0 :(得分：0)
如果我理解你的问题（如果我错了就纠正我），那么我想你想了解点击删除按钮实际上是如何删除某一行。
让我解释一下：
每行末尾都有一个删除按钮，代码为：
<span class="uk-input-group-addon">
<a ng-click="Remove($index)"><i class="material-icons"></i></a>
</span>
在上面的代码中有一个点击处理程序ng-click="Remove($index)"，所以当你点击删除按钮时，它会调用一个传递当前项目索引的函数。该功能通过曝光。模型和你的情况$scope.Remove函数。定义如下：
$scope.Remove = function(index) {
// .......
$scope.items.splice(index, 1); //<-- This is the code that deletes the item from the array.
// ........
}
在上面的函数中，我们在数组上调用Array.splice方法并更新数组。有关详细信息，请阅读splice。
由于数组是使用ng-repeat显示的，因此会自动检测数组的更改并更新视图。
有关详细信息，请阅读AngularJS ng-repeat directive。
此处您的代码使用ng-repeat指令来显示行，例如：
<tr class="form_section" id="data_clone" ng-repeat="item in items track by $index">
.....
.....
</tr>
由于所谓的AngularJS双向绑定，更新发生了。有关详细信息，请阅读this article。
希望这会有所帮助。 ：）
答案 1 :(得分：0)
您的代码似乎没问题。您也没有使用任何过滤器。 （https://jsfiddle.net/1m1hzqem/1/用于过滤器问题）
这是不一致的行为\问题。应使用track by $id(item)并进一步更改方法Remove(item)。
further read可能会帮助您