我有按钮会添加新的搜索部分和删除部分，但是如果你点击第一部分，然后你删除第一部分然后再添加第一部分第一部分没有得到删除按钮，为什么按钮不是工作
TLDR;转到小提琴单击“添加”，“删除”，“添加”。怎么没有删除按钮？
HTML
<div ng-controller="SearchCntrl">
<form class="form-horizontal" role="form">
<div ng-repeat="section in searchSection">
<section ng-model="searchSection" class="panel panel-primary" style="padding:10px 10px 2px 15px;">
<div class="form-group">
<label class="col-sm-2 control-label">Search:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="chosenColumn" ng-options="col.label for col in filterableColumns" ng-change="SetSearchType(chosenColumn)"></select>
</div>
</div>
<div class="form-group" ng-if="SearchType=='str'">
<label class="col-sm-2 control-label">Condition:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="chosenStringCondition" ng-options="condition.label for condition in stringConditions" ng-change="SetSearchCondition(chosenStringCondition)"></select>
</div>
</div>
<div class="form-group" ng-if="SearchType=='int'">
<label class="col-sm-2 control-label">Condition:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="chosenIntegerCondition" ng-options="condition.label for condition in integerConditions"></select>
</div>
</div>
<div class="form-group" ng-if="SearchType=='sel'">
<label class="col-sm-2 control-label">Condition:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="chosenSelectCondition" ng-options="condition.label for condition in selectConditions"></select>
</div>
</div>
<div class="form-group" ng-if="SearchType=='str' && SearchCondition != 'COMMON_ITEM'">
<label class="col-sm-2 control-label">Term:</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="searchTerm" placeholder="Search Term" />
</div>
</div>
<div class="form-group" ng-if="SearchType=='int'">
<label class="col-sm-2 control-label">Term:</label>
<div class="col-sm-6">
<input type="number" class="form-control" ng-model="searchTerm" placeholder="Search Term" />
</div>
</div>
<div class="form-group" ng-if="SearchType=='sel'">
<label class="col-sm-2 control-label">Status:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="chosenStatus" ng-options="status.label for status in statusColors"></select>
</div>
</div>
<div class="form-group" ng-show="!showAddAdditionalSearchParameters(section)">
<div class="col-sm-8">
<div style="text-align:right;">
<button type="button" ng-click="RemoveSearchSection(section)" class="btn btn-danger"><i class="fa fa-minus"></i> Remove Search Parameters</button>
</div>
</div>
</div>
<div class="form-group" ng-show="showAddAdditionalSearchParameters(section)">
<div class="col-sm-8">
<div style="text-align:right;">
<button type="button" ng-click="AddNewSearchSection()" class="btn btn-success"><i class="fa fa-plus"></i> Add Additional Search Parameters</button>
</div>
</div>
</div>
</section>
</div>
</form>
</div>
JavaScript的：
var app = angular.module('app', []);
app.controller('SearchCntrl', ['$scope', function($scope) {
$scope.searchSection = [{
id: 'section0'
}];
$scope.filterableColumns = [{
value: 1,
label: "Product Code",
type: "str"
}, {
value: 2,
label: "Product Name",
type: "str"
}, {
value: 3,
label: "Quantity Avail",
type: "int"
}, {
value: 4,
label: "Status",
type: "sel"
}];
$scope.chosenColumn = $scope.filterableColumns[1];
$scope.stringConditions = [{
value: 'LIKE',
label: "LIKE"
}, {
value: 'CONTAINS',
label: "CONTAINS"
}, {
value: 'EQ',
label: "EQUALS"
}, {
value: 'DNC',
label: "DOES NOT CONTAIN"
}, {
value: 'DNE',
label: "DOES NOT EQUAL"
}, {
value: 'COMMON_ITEM',
label: "IS COMMON ITEM"
}];
$scope.chosenStringCondition = $scope.stringConditions[1];
$scope.integerConditions = [{
value: 'EQ',
label: "EQUALS"
}, {
value: 'LT',
label: "LESS THAN"
}, {
value: 'GT',
label: "GREATER THAN"
}];
$scope.chosenIntegerCondition = $scope.integerConditions[1];
$scope.selectConditions = [{
value: 'EQ',
label: "EQUALS"
}];
$scope.chosenSelectCondition = $scope.selectConditions[0];
$scope.statusColors = [{
value: 'red',
label: "Red"
}, {
value: 'yellow',
label: "Yellow"
}, {
value: 'green',
label: "Green"
}];
$scope.chosenStatus = $scope.statusColors[2];
$scope.SetSearchType = function(selection) {
$scope.SearchType = selection.type;
};
$scope.SetSearchCondition = function(selection) {
$scope.SearchCondition = selection.value;
};
$scope.AddNewSearchSection = function() {
var newItemNo = $scope.searchSection.length + 1;
$scope.searchSection.push({
'id': 'section' + newItemNo
});
};
$scope.RemoveSearchSection = function(section){
var index = $scope.searchSection.indexOf(section);
$scope.searchSection.splice(index, 1);
};
$scope.showAddAdditionalSearchParameters = function(section) {
var index = $scope.searchSection.length - 1;
console.log("compare "+section.id+" to "+$scope.searchSection[index].id);
return section.id === $scope.searchSection[index].id;
};
$scope.SetSearchType($scope.chosenColumn);
$scope.SetSearchCondition($scope.chosenStringCondition);
}]);
答案 0 :(得分：1)
我个人会使用Date.now()来获取该部分的唯一ID而不是array.length + 1.其他更好的方法与此相比总是可行的。
$scope.AddNewSearchSection = function () {
var newItemNo = Date.now().toString(); //$scope.searchSection.length + 1;
$scope.searchSection.push({
'id' : 'section' + newItemNo
});
};
$scope.RemoveSearchSection = function (section) {
var i;
//index of section will not give you the correct answer
//as noted already you want section.id part and compare with that
//one way is to loop through the array and remove it using splice
for (i = $scope.searchSection.length - 1; i >= 0; i -= 1) {
if ($scope.searchSection[i].id == section.id) {
console.log('removed ' + section.id)
$scope.searchSection.splice(i, 1);
break;
}
}
};