我的 AngularJS 模型仅在我的按钮被点击两次时更新

Question

我有一个选择列表框，我有一个按钮。基于按钮selectId，我必须过滤选择列表框中显示的模型。

这里的问题是模型只有在我点击这个按钮两次时才会更新。我在GetFormsClicked 中有一个过滤器函数，其中包含与此相关的逻辑。

我的 Angular 控制器如下：

(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>

我的数据分析器代码：

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-model 中总是有一个点”，你应该有一个带有正确 obj 的 ng-model="obj.variable"。

原因是每个带有scope:true 的指令都继承了父范围，并且您正在编辑的“变量”不会复制回父范围。

问题是由于字符串是按值复制的。 通过使用一个对象，所有作用域都将引用同一个变量。