ヘルプが必要ダイアログボックスの要素を消去するAngularJS

Question

私はAngularJS SPAを持っており、そのうちの1ページが検索ページです。検索ページで、「ベンダー」ボタンをクリックすると「ベンダー」というボタンがありますダイアログボックスが開きます。ここまでは順調ですね。

ダイアログボックスには、入力フィールド（入力ng-model = "vendorSearchBy"）と、入力テキストフィールドに入力した内容に基づいてベンダーのリストを表示するテーブルがあります。入力を開始すると（2文字後）、ベンダー名で入力した文字と一致するベンダーが検索結果とともに表示されます。まだ私と一緒に？

ここでは、テーブルには3つの列があります。最初の列はベンダを選択するための入力フィールド（チェックボックス）です。入力タイプ= "チェックボックス" ng-init = "アクション= hasVendor（rec_）" ng-model = "アクション" ng-change = "vendorSelected（action、 rec_） "）、2番目の列はベンダーの名前、3番目の列はベンダーの説明です。

ダイアログボックスにも3つのボタンがあります。 OK、Close、およびClearを選択します。クリアボタンには私が助けが必要なところです。 [クリア]ボタンをクリックすると、この問題が発生します。

1. 入力テキストフィールドをクリアします。
2. 入力チェックボックスをオフにします（チェックされている場合）。チェックをはずします。
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 = {};