My AngularJSモデルは、ボタンが2回クリックされたときにのみ更新されます。

Question

私は選択リストボックスを持っており、ボタンがあります。ボタンselectIdに基づいて、選択リストボックスに表示されているモデルをフィルタリングする必要があります。

ここでの問題は、このボタンを2回クリックしたときにのみモデルが更新されることです。これに関するロジックを持っている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"の使用に変更します。

ルールは「あなたのモデルには常にドットが入っています」、正しいobjを持つng-model="obj.variable"が必要です。

scope:trueの各ディレクティブが親スコープを継承し、編集中の「変数」が親にコピーされないためです。

問題は、文字列が値によってコピーされているためです。 オブジェクトを使用すると、すべてのスコープが同じ変数を参照します。