CODEWITHSUNDEEP
javascriptjqueryangularjs
user3681378
user3681378

Reputation: 95

ng-dirty is not working as expected

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.

  1. If my first tab data has changed and moved to second tab why are input elements still dirty on second tab. (Function - $scope.changeIndex)

  2. 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);

}());

Upvotes: 1

Views: 1971

Answers (2)

jlew
jlew

Reputation: 10591

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

Upvotes: 1

ryanyuyu
ryanyuyu

Reputation: 6486

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.

Upvotes: 1

Related Questions