如何防止在Angularjs中插入重複記錄

我使用Angular和Web API從SQL數據庫表中加載所有記錄，我試圖做的是防止用戶在Angular中插入新記錄以防在訪問API之前，數據將與其他記錄返回的數據一起復制。如何提示警報通知和張緊用戶時，按保存，有一些字段已經存在，如「代碼」，「L_Desk」，「A_Desc」與從表中加載的數據。如何防止在Angularjs中插入重複記錄

HTML：

<body ng-app="ContractT" ng-controller="crudController"> 
<br /><br />

<input type="checkbox" ng-model="Hide" />Hide <input type="button" value="Clear" ng-click="resetform()" /> 
    <input type="submit" value="Save" ng-click="save()"/> <input type="button" value="Delete" ng-click="delete(selectedMember.sys_key)" /> 
    <fieldset> 
     <legend>Contract Type</legend> 
     <table> 
      <tr> 
       <td>Code</td> 
       <td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" required autofocus ng-model="selectedMember.Code.Staff_Type_Code"> 
        <input type="text" size="10" hidden ng-model="selectedMember.sys_key" /> </td> 
      </tr> 
      <tr> 
       <td>Latin Description</td> 
       <td><input type="text" required size="35" ng-model="selectedMember.Latin.L_Desc"></td> 
      </tr> 
      <tr> 
       <td>Local Description</td> 
       <td><input type="text" required size="35" ng-model="selectedMember.Local.A_Desc"></td> 
      </tr> 
      <tr> 
       <td>No. Of Houres Per Day</td> 
       <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Hours_Day"></td> 
      </tr> 
      <tr> 
       <td>No. Of Days Per Week(s)</td> 
       <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Days_Week"></td> 
      </tr> 
      <tr> 
       <td>End Of Contract By</td> 
       <td> 
        <select ng-model="selectedContract"> 
         <option>Age</option> 
         <option>Number Of Years in Service</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td>Number</td> 
       <td> 
        <input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Num_EndWork"> 
        <select ng-model="selectedNumber"> 
         <option >Months</option> 
         <option>Years</option> 
        </select> 
       </td> 
      </tr> 

     </table> 
    </fieldset> 

    <br /> 

    <table border="1" ng-hide="Hide"> 
     <thead> 
      <tr> 
       <!--<th>syskey</th>--> 
       <th>Code</th> 
       <th>Latin Description</th> 
       <th>Local Description</th> 
       <th>Hours_Day</th> 
       <th>Days_Week</th> 
       <th>Num_EndWork</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="c in Contracts | filter:selectedMember.Code | filter:selectedMember.Latin | filter:selectedMember.Local "> 

       <td style="display:none;"><a href="#" ng-click="showInEdit(c)">{{c.sys_key}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.Staff_Type_Code}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.L_Desc}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.A_Desc}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.Hours_Day}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.Days_Week}}</a></td> 
       <td><a href="#" ng-click="showInEdit(c)">{{c.Num_EndWork}}</a></td> 

      </tr> 
     </tbody> 
    </table> 

</form>

控制器：

contractT.controller('crudController', function ($scope, crudService) 
{ 
    loadrecords(); 
    function loadrecords() 
    {  
     crudService.getContracts().then(function (response) { 
      $scope.Contracts = (response.data); 
      $scope.selectedMember = {}; 
      console.log($scope.Contracts); 
     }); 
    } 

$scope.save = function() { 

    debugger; 

    if ($scope.selectedContract == 'Age' && $scope.selectedNumber == 'Months') { 
     var Contract = { 
      Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code, 
      L_Desc: $scope.selectedMember.Latin.L_Desc, 
      A_Desc: $scope.selectedMember.Local.A_Desc, 
      Num_EndWork: $scope.selectedMember.Num_EndWork, 
      Type_EndWork: 1, 
      Hours_Day: $scope.selectedMember.Hours_Day, 
      Days_Week: $scope.selectedMember.Days_Week, 
      sys_key: $scope.selectedMember.sys_key 
     } 


    } 
    else if ($scope.selectedContract == 'Age' && $scope.selectedNumber == 'Years') 
    { 
     var Contract = { 
      Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code, 
      L_Desc: $scope.selectedMember.Latin.L_Desc, 
      A_Desc: $scope.selectedMember.Local.A_Desc, 
      Num_EndWork: $scope.selectedMember.Num_EndWork, 
      Type_EndWork: 2, 
      Hours_Day: $scope.selectedMember.Hours_Day, 
      Days_Week: $scope.selectedMember.Days_Week, 
      sys_key: $scope.selectedMember.sys_key 
     } 
    } 

    else if ($scope.selectedContract == 'Number Of Years in Service' && $scope.selectedNumber == 'Months') { 
     var Contract = { 
      Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code, 
      L_Desc: $scope.selectedMember.Latin.L_Desc, 
      A_Desc: $scope.selectedMember.Local.A_Desc, 
      Num_EndWork: $scope.selectedMember.Num_EndWork, 
      Type_EndWork: 3, 
      Hours_Day: $scope.selectedMember.Hours_Day, 
      Days_Week: $scope.selectedMember.Days_Week, 
      sys_key: $scope.selectedMember.sys_key 
     } 
    } 

    else { 
     var Contract = { 
      Staff_Type_Code: $scope.selectedMember.Code.Staff_Type_Code, 
      L_Desc: $scope.selectedMember.Latin.L_Desc, 
      A_Desc: $scope.selectedMember.Local.A_Desc, 
      Num_EndWork: $scope.selectedMember.Num_EndWork, 
      Type_EndWork: 4, 
      Hours_Day: $scope.selectedMember.Hours_Day, 
      Days_Week: $scope.selectedMember.Days_Week, 
      sys_key: $scope.selectedMember.sys_key 
     } 
    } 

    if (!$scope.selectedMember.sys_key) { 
     var promisePost = crudService.post(Contract); 
     promisePost.then(function (pl) { 
      loadRecords(); 
      $scope.selectedmember = {}; 
     }, function (err) { 
      console.log("Err" + err); 
     }); 
    } 
    else 
    { 
     var promisePost = crudService.put(Contract); 
     promisePost.then(function (pl) { 
      loadRecords(); 
      $scope.selectedmember = {}; 
     }, function (err) { 
      console.log("Err" + err); 
     }); 
    } 
} 




$scope.resetform = function() { 
    $scope.selectedMember = {}; 
    //$scope.selectedMember = {}; 
    //$scope.Local = {}; 
    //$scope.Nhd = null; 
    //$scope.Ndw = null; 
    //$scope.Num = null; 
    } 




$scope.selectedMember = { Code: "",sys_key:"", Latin:"" , Local:"", Hours_Day :"", Days_Week:"", Num_EndWork:"" } 

$scope.showInEdit = function (member) 
{ 
    $scope.selectedMember = member; 
    //$scope.selectedMember.Code = member; 
    //$scope.selectedMember.Latin = member; 
    //$scope.selectedMember.Local = member; 
    //$scope.selectedMember.Hours_Day = member; 
    //$scope.selectedMember.Days_Week = member; 
    //$scope.selectedMember.Num_EndWork = member; 
}

來源

2017-10-08 Hassan

任何幫助，這是可能的，謝謝 – Hassan

你可以在這裏使用過濾器序，以檢查重複

var filtered= $filter('filter')($scope.contracts, function(value){ 
     return value.Staff_Type_Code === Contract.Staff_Type_Code ; 
}); 

if(filtered.length > 0){ 
    console.log("duplicate exists"); 
}

來源

2017-10-09 18:27:36 Sajeetharan

或者他可以使用本地'[] .find（）'數組方法。 –

如何防止在Angularjs中插入重複記錄

回答

相關問題