javascript - ng-dirty 没有按预期工作

Question

我很难理解为什么我的元素在更新模型后显示 ng-dirty。

我有一组需要在 UI 上呈现的桥梁。在每次点击选项卡时，我都会更改索引并呈现数据。

1. 如果我的第一个选项卡数据已更改并移动到第二个选项卡，为什么第二个选项卡上的输入元素仍然是脏的。 (函数 - $scope.changeIndex)

2. 执行计算后，模型得到更新，但输入元素仍然是脏的

界面

<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

来自documentation

ng-dirty is set if the form is dirty.

这是检查表单 本身是否以任何方式与之交互。它不关心底层对象绑定(bind)是什么。所以这是预期的行为，因为您使用的是相同的表单，但在幕后更改了 ng-model。