Question

我有一个AngularJS SPA，其中一个页面是一个Search页面，如果我点击Vendor（s）按钮打开一个对话框，在Search页面上有一个叫做Vendor的按钮。到目前为止一切都很好。

在对话框中有一个输入字段（输入ng-model =＆＃34; vendorSearchBy＆＃34;）和一个表格，根据您在输入文本字段中输入的内容显示供应商列表。一旦开始输入（在2个字符之后），表格就会加载结果，供应商与您输入的字母与供应商名称相匹配。还在我身边吗？

现在，该表有三列;第一列是输入字段（复选框）以选择供应商（输入类型=＆＃34;复选框＆＃34; ng-init =＆＃34; action = hasVendor（rec _）＆＃34; ng-model =＆＃34; action＆＃34; ng-change =＆＃34; vendorSelected（action，rec _）＆＃34;），第二列是供应商的名称，第三列是供应商的描述。

在对话框中还有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];
    }
};

我真的希望你们可以帮助我。

Answer 1

"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 = {};

需要帮助清除AngularJS

1 个答案: