我有一个 AngularJS SPA，其中一个页面是搜索页面，在搜索页面上有一个名为“vendor ”的按钮，如果我单击“vendor ”按钮，则会打开一个对话框。到目前为止一切顺利。
该对话框中有一个输入字段(输入 ng-model="vendorSearchBy")和一个表格，该表格根据您在输入文本字段中输入的内容显示 vendor 列表。一旦您开始输入(2 个字符后)，表格就会加载结果，其中的 vendor 与您输入的字母和 vendor 名称相匹配。还在我身边吗？
现在，该表有三列；第一列是用于选择 vendor 的输入字段(复选框)(输入类型=“checkbox”ng-init=“action=hasVendor(rec_)”ng-model=“action”ng-change=“vendorSelected(action， rec_)")，第二列是 vendor 的名称，第三列是 vendor 的描述。
对话框上还有3个按钮；确定、关闭并清除。 “清除”按钮是我需要帮助的地方。当我单击“清除”按钮时，我希望发生这种情况:
- 清除输入文本字段。
- 将输入复选框从已选中(如果已选中)清除为未选中。
- 清空表格并且没有结果。
对话框上的所有内容都非常清晰，并且有一个空的输入字段和一个没有结果的空表。
这是 HTML
<div id="selectVendorsBox" title="Select Vendors" class="content">
<div style="margin-bottom: 5px; font-size: 13px; float: left;">
<label>Search for </label>
<input ng-model="vendorSearchBy" class="dialog-input" placeholder="Vendor (min 3 letters)">
</div>
<div style="width: calc(100% - 270px); float: right;">
<span style="font-size: 10px; line-height: normal;" ng-repeat="(k,v) in vendors">{{v.shortName}}, </span>
</div>
<div class="clear"></div>
<div class="ui-jqgrid" style="border: solid 1px gray; border-radius: 5px; font-size: 13px;">
<div class="header" style="text-align: left;">
Search Results:
</div>
<div id="searchGridBox" style="display: block; visibility: visible; height: 450px;">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<thead style="width: 100%;">
<tr style="width: 100%;">
<th style="width: 50px;">Select</th>
<th style="width: 300px;">Vendor Name</th>
<th style="width: calc(100% - 350px);">Description</th>
</tr>
</thead>
<tbody style="width: 100%;">
<tr ng-repeat="rec_ in vsearchresults.content" style="width: 100%;">
<td>
<input type="checkbox" ng-init="action=hasVendor(rec_)" ng-model="action" ng-change="vendorSelected(action, rec_)"/>
</td>
<td style="overflow-x: hidden;">{{rec_.shortName}}</td>
<td style="overflow-x: hidden;">{{rec_.longDescription}}</td>
</tr>
</tbody>
</table>
</div>
<div class="cs-pagination">
<div style="width: 200px; height: 20px; margin: 0px auto;">
<div style="float: left; padding-right: 4px;">
<span class="ui-icon ui-icon-seek-first" ng-click="vpage=1" ng-class="{disabled:(vsearchresults.first)}"></span>
<span class="ui-icon ui-icon-seek-prev" ng-click="vpreviousPage()" ng-class="{disabled:(vsearchresults.first)}"></span>
</div>
<div style="float: left; padding: 0px 4px; border-left: solid 1px gray; border-right: solid 1px gray;">
Page: {{vpage}} of {{vsearchresults.totalPages}}
</div>
<div style="float: left; padding-left: 4px;">
<span class="ui-icon ui-icon-seek-next"
ng-click="vnextPage()" ng-class="{disabled:(vsearchresults.last)}"></span>
<span class="ui-icon ui-icon-seek-end"
ng-click="vpage=vsearchresults.totalPages" ng-class="{disabled:(vsearchresults.last)}"></span>
</div>
</div>
</div>
</div>
</div>
这是 JS
$scope.vendorSearchBy = null;
$scope.vsearchresults = null;
$scope.vpage = 1;
$scope.vendorsDialog = $('#selectVendorsBox');
/** this code is for the Vendor's dialog pop-up window **/
$scope.vendorsDialog.dialog({
width: 1100,
height: window.innerHeight * 0.71,
resizable: false,
autoOpen: false,
modal: true,
buttons: {
"OK" : function() {
$( this ).dialog( "close" );
},
"CANCEL" : function( ){
$( this ).dialog( "close" );
},
"CLEAR" : function() {
console.log('I am here and I need Help!!');
}
},
close: function(e, ui) {
}
});
/** this function opens the Vendor's dialog pop-up **/
$scope.selectVendors = function() {
$scope.vendorsDialog.dialog('open');
};
$scope.vpreviousPage = function() {
if( $scope.vsearchresults ) {
if( !$scope.vsearchresults.first ) {
$scope.vpage--;
}
}
};
$scope.vnextPage = function() {
if( $scope.vsearchresults ) {
if( !$scope.vsearchresults.last ) {
$scope.vpage++;
}
}
};
$scope.vendorSearch = function() {
if( $scope.vendorSearchBy && $scope.vendorSearchBy.length > 2 ) {
var vendors = $lookupSvc.Vendors({shortName: $scope.vendorSearchBy}, 20, $scope.vpage-1);
vendors.$promise.then(function(d) {
if( d ) {
$scope.vsearchresults = d;
}
});
}
};
$scope.$watch('vendorSearchBy', function(nv, ov) {
if( nv ) {
$scope.vendorSearch();
}
});
$scope.$watch('vpage', function(nv, ov) {
if( $scope.vpage ) {
if( $scope.vpage !== ov ) {
if( $scope.vsearchresults ) {
if( $scope.vpage < $scope.vsearchresults.totalPages + 1 ) {
$scope.vendorSearch();
}
else {
console.log('Page out of range.');
}
}
}
}
});
$scope.hasVendor = function(v) {
let h = false;
if( v ) {
let keys = Object.keys($scope.vendors);
h = keys.includes(v.shortName);
}
return h;
}
$scope.vendorSelected = function(a, v) {
if( a ) {
$scope.vendors[v.shortName] = v;
}
else {
delete $scope.vendors[v.shortName];
}
};
我真的希望你们能帮助我。
最佳答案
"CLEAR" : function() {
console.log('I am here and I need Help!!');
}
类似这样的事情:
$scope.vendorSearchBy = "";
//If the vendor flag is being persisted then unset the flag for each one
//if it's not then this for loop is redundant
for(var i = 0; i < $scope.vsearchresults.content.length; i++){
var currentResult = $scope.vsearchresults.content[i];
//Ensure each listed vendor has its flag set to false
currentResult.action = false;
};
//Set the search results content to an empty object to clear the table
$scope.vsearchresults.content = {};
关于javascript - 需要帮助清除对话框中的元素 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47311939/