我的AngularJS模型只會在我的按鈕被點擊兩次時更新

Question

我有一個選擇列表框，並且我有一個按鈕。基於按鈕selectId，我必須過濾在選擇列表框中顯示的模型。

這裏的問題是，模型只有當我點擊這個按鈕兩次更新。我在GetFormsClicked中有一個過濾器函數，它有關於這個的邏輯。

我的角度控制器如下：

(function() { 
    var controllerId = 'GroupsController'; 

    ig.app.controller(controllerId, ['$scope', '$log', '$http', '$compile', 'fileRvwQuestSvc', 'DataSvc', 
    function($scope, $log, $http, $compile, fileRvwQuestSvc, DataSvc) { 

     $scope.FrequencyMap = { 
     1: "Annual", 
     2: "Monthly", 
     3: "Half Year" 
     }; 

     $scope.FormMap = { 
     1: "CMSMISC", 
     2: "CMSFPEA", 
     3: "CMSPIID", 
     5: "CMSMSR", 
     7: "CMSCOI" 
     } 

     $scope.GetAllGroupForms = function(Id) { 
     var url = '/GroupForm/Details/' + Id; 
     $scope.loading = true; 
     DataSvc.getAjaxData(url) 
      .then(function(data) { 
      //success   
      $scope.GroupForm = data.data; 
      $scope.GroupFormBack = data.data; 
      $scope.loading = false; 
      }, function(httpStatus) { 
      //failed 
      $scope.hasErrors = true; 
      if (httpStatus === 404) { 
       $scope.errorMessage = "Couldn't retrieve Users Info"; 
      } else { 
       $scope.errorMessage = 'The system could not process your request, please try again or contact the system administrator.'; 
      } 
      $log.warn(httpStatus); 
      $scope.loading = false; 
      }); 
     }; 


     $scope.availableFormsTestOriginal = [ 

     { 
      "Id": null, 
      "GroupId": null, 
      "FormId": 1, 
      "SortOrder": null, 
      "Frequency": 1, 
      "IsCollapsed": false, 
      "IsDeleted": false 
     }, 
     { 
      "Id": null, 
      "GroupId": null, 
      "FormId": 2, 
      "SortOrder": null, 
      "Frequency": 1, 
      "IsCollapsed": false, 
      "IsDeleted": false 
     }, 
     { 
      "Id": null, 
      "GroupId": null, 
      "FormId": 3, 
      "SortOrder": null, 
      "Frequency": 1, 
      "IsCollapsed": false, 
      "IsDeleted": false 
     } 

     ] 


     var AddGroupForm = function() { 

     $scope.loading = true; 
     var url = '/GroupForm/Create/'; 
     DataSvc.AddFormData(url, $scope.GroupForm) 
      .then(function(data) { 
      //success 
      $scope.loading = false; 
      //$scope.successMessage = "Form Saved Successfully"; 
      $scope.successMessage = "GroupForm Updated Successfully"; 
      }, function(httpStatus) { 
      //failed 
      $scope.hasErrors = true; 
      if (httpStatus === 404) { 
       $scope.errorMessage = "Couldn't retrieve Users Info"; 
      } else { 
       $scope.errorMessage = 'The system could not process your request, please try again or contact the system administrator.'; 
      } 
      $log.warn(httpStatus); 
      $scope.loading = false; 
      }); 
     } 

     $scope.filterailableforms = function() { 
     for (i = 0; i < $scope.availableFormsTest.length; i++) { 
      for (j = 0; j < $scope.GroupForm.length; j++) { 
      if ($scope.availableFormsTest[i].FormId === $scope.GroupForm[j].FormId && $scope.availableFormsTest[i].Frequency === $scope.GroupForm[j].Frequency) { 
       $scope.availableFormsTest.splice(i, 1); 
      } 
      } 
     } 

     } 


     activate(); 

     $scope.GetFormsClicked = function(selectid) { 
     $scope.availableFormsTest = angular.copy($scope.availableFormsTestOriginal); 
     $scope.GetAllGroupForms(selectid); 
     $scope.updateavailableforms(selectid); 
     $scope.filterailableforms(); 
     } 

     function activate() { 
     $scope.loading = false; 
     $scope.GetAllGroup(); 

     } 


    } 
    ]); 
})(); 

我的視圖代碼如下：

<button ng-click="GetFormsClicked(selectedId)">Select Group <span style="color:black"></span></button>` <select size="5" multiple ng-model="available" ng-options="x as FormMap[x.FormId]+' --- '+FrequencyMap[x.Frequency] for x in availableFormsTest" style="width: 400px"></select> 

我dataser代碼：

ig.app.factory('DataSvc', [ 
'$http', '$q', '$log', 
function ($http, $q, $log) { 
    return { 
     getAjaxData: function (CtrlUrl) { 
      var deferred = $q.defer(); 
      var rnd = ((Math.random() * 1000000) + 1); 
      $http({ 
       method: 'GET', 
       url: CtrlUrl + "/?r=" + rnd 
      }) 
      .then(function (data, status, headers, config) { 
       deferred.resolve(data, status, headers, config); 
      }, 
      function (data, status, headers, config) { 
       $log.warn(data, status, headers(), config); 
       deferred.reject(status); 
      }); 
      return deferred.promise; 
     }, 
     AddFormData: function (CtrlUrl, model) { 
      var deferred = $q.defer(); 
      $http.post(CtrlUrl, model).then(function (data, status, headers, config) { 
       deferred.resolve(data, status, headers, config); 
      },function (data, status, headers, config) { 
       $log.warn(data, status, headers(), config); 
       deferred.reject(status); 
      }); 
      return deferred.promise; 
     }, 
     UpdateFormData: function (CtrlUrl, model) { 
     var deferred = $q.defer(); 
     $http.post(CtrlUrl, model).then(function (data, status, headers, config) { 
      deferred.resolve(data, status, headers, config); 
     },function (data, status, headers, config) { 
      $log.warn(data, status, headers(), config); 
      deferred.reject(status); 
     }); 
     return deferred.promise; 
    } 
    } 
}]); 

Answer 1

你的問題是應有使用ng-model="variable"。

規則是「在你的ng模型中總是有一個點」，你應該有一個ng-model="obj.variable"與正確的obj。

原因是每個指令scope:true都繼承了父作用域，並且您正在編輯的「變量」不會被複制回父對象。

問題是由於字符串被按值複製的事實。 通過使用一個對象，所有範圍將引用相同的變量。