Question

I am having tough time in understanding why my element shows ng-dirty after updating the model.

I have a collection of bridges which need to be rendered on UI. On each tab click, I am changing the index and rendering the data.

If my first tab data has changed and moved to second tab why are input elements still dirty on second tab. (Function - $scope.changeIndex)
After executing calculate, the model gets updated but still the input elements are still dirty

UI

<td style="padding:10px;text-align:center">
    <label>Length:</label>
    <input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].length" />
</td>

<td style="padding:10px;text-align:center">
    <label>Width:</label>
    <input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].width" />
</td>

<td style="padding:10px;text-align:center">
    <label> Skew:</label>
    <input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].skew" />
</td>

Controller

(function () {


var bridgeCtrl = function ($scope, $bootstrapBridgeData, $crudService,$log) {


    $scope.bridgeModel = $bootstrapBridgeData.bridgeModel;


    var onCalculateComplete = function (data) {
        $scope.bridgeModel.bridges[$scope.currentIndex] = angular.copy(angular.fromJson(data));

    }

    var onCalculateError = function (reason){
        $scope.error = "Unable to perform calculation";
        $log.error(reason);
    }

    var onError = function (reason) {
        $scope.error = "Unable to fetch data";
    }



    //function to null the values which needs to be re-computed
    var removeCalculatedValues = function () {


        $scope.bridgeModel.bridges[$scope.currentIndex].foundation_PreBoringCalculated = null;
        $scope.bridgeModel.bridges[$scope.currentIndex].foundation_DrilledShaftsCalculated = null;

    }

    //function to compute the bridge values
    $scope.calculate = function (url) {

        if (!preValidation()) {
            return false;
        }

        removeCalculatedValues();

        $crudService.postAndGetData(url, $scope.bridgeModel.bridges[$scope.currentIndex])
                     .then(onCalculateComplete, onCalculateError)


    }

    //function to select the bridge and change the index of the bridge
    $scope.changeIndex = function (bridgeName,index) {
         $scope.selectedBridge = bridgeName;
         $scope.currentIndex = index;           
    }

    $scope.save = function (index, url) {

        $scope.currentIndex = index;
        crudService.postAndGetData(url, $scope.bridges[index])
                   .then(onUserComplete, onError);

    }

    //$scope.enableSave = function isFormDirty() {

    //    if ($(".ng-dirty").length) {
    //        return false;
    //    }
    //    else { return true; }
    //}

    //Behaviour Changes


    //function which changes the css 
    $scope.isBridgeSelected = function (bridge) {
        return $scope.selectedBridge === bridge;
    }

    var preValidation = function () {

        if ($(".ng-invalid").length) {
            alert("Please correct the errors.")
            return false;
        }
        else { return true;}
    }



}


//Get the module and add a controller to it
var module = angular.module("bridgeModule");
module.controller("bridgeCtrl", bridgeCtrl);

}());

Answer 1

From the documentation

ng-dirty is set if the form is dirty.

This is a check for whether the form itself has been interacted with in any way. It doesn't care what the underlying object binding is. So this is the expected behavior, since you are using the same form but changing the ng-model behind the scenes.

Answer 2

Dunno if this is the problem or not, but the line $scope.$setPristine; is not doing anything. It should be: $scope.$setPristine();

ng-dirty is not working as expected

2 个答案: