Question

我有一个简单的页面，其中有现有项目列表（可以修改这些项目）以及将新项目添加到现有列表的选项。

共有2个部分，CodeLookup和Benchmark。两个部分的设计是相同的（如上所述）。

有一个链接可以将所有更改恢复到初始状态。在JS上，有一些数组，一个用于存储显示的列表，另一个用于存储列表的初始状态的备份数组。有一个添加功能，可以将新输入的数据添加到列表中。最后有一个取消方法（链接到取消链接），它将列表恢复到其初始状态。这种取消方法只是将原始列表放在用于显示数据的列表中。

现在，codelookup值在第一次取消时被恢复。但是，如果您在列表中再次修改并热取消，则不会进行恢复。基准也没有得到重视。我在Chrome开发工具上放置了断点，发现该列表包含原始列表中的值，但它没有反映在UI上。

感谢您解决此问题的任何帮助。

以下是代码：

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<SCRIPT type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></SCRIPT>

<script type="text/javascript">

    var referenceDataMaintainenceApp = angular.module('referenceDataMaintainenceApp',[] );
    referenceDataMaintainenceApp.controller('referenceDataMaintainenceCtrl', function     ($scope) {

    $scope.orig_lookup_codes_details;
    $scope.orig_calendar_details;
    $scope.orig_pams_fields;
    $scope.orig_brokers_details;

    $scope.lookup_codes_details = [{'lookupName':'ac_asset','codeName':'ABCD','codeDetail':'sdfsdfsdf','ruleDetail':'sdsdsdsdsd','active':false}];
    $scope.benchmarks_details = [{'benchmarkName':'Bench1','benchmarkDesc':'First Entry','active':false}];

    $scope.orig_lookup_codes_details = angular.copy($scope.lookup_codes_details);
    $scope.orig_brokers_details = angular.copy($scope.benchmarks_details);



    $scope.addLookupCode = function() {


        $scope.lookup_codes_details.push($scope.new_lookup_code);

        $scope.new_lookup_code = getLookupCodeObject();


    };
    $scope.addBenchMark = function() {

        $scope.benchmarks_details.push($scope.new_benchmark);
        $scope.new_benchmark = getBenchMarkObject();

    };

    $scope.cancelData = function() {

        $scope.brokers_details       = $scope.orig_brokers_details;
        $scope.lookup_codes_details  = $scope.orig_lookup_codes_details;

        console.log("sdsd");
        //$http.post('/data/save', $scope.benchmarks_details);
    };


});

function getLookupCodeObject () {

    lookup_code = {
            lookupName :  '', 
            codeName : '',
            codeDetail : '',
            ruleDetail : '',
            active : false
    };

    return lookup_code;
}
function getBenchMarkObject () {

    benchmark = {
            benchmarkName :  '', 
            benchmarkDesc : '',
            benchmarkId : '',
            benchmarkType : ''
    };

    return benchmark;
}
</script>
 </head>
<body ng-app="referenceDataMaintainenceApp" ng-controller="referenceDataMaintainenceCtrl" >

<div><A class="operationalnav"  ng-click="cancelData()" 
                href="javascript:;">Cancel</A> </div>

                <br />
                <br />

<TABLE id="tblGridLookupCodes" class="tableData" border="0"
    width="100%">
    <THEAD>
        <TR bgColor="#eaeaea">
            <TD class="tableTitle" noWrap>Code Name</TD>
            <TD class="tableTitle" noWrap>Description</TD>
            <TD class="tableTitle" noWrap align="center">Active</TD>
        </TR>
    </THEAD>
    <TBODY>
        <TR ng-repeat="lookup_code_detail in lookup_codes_details">
            <td nowrap="nowrap">{{lookup_code_detail.codeName}}</td>
            <td nowrap="nowrap">
                <input type="text" name="codeLookupBean[0].codeDescription" 
                    maxlength="100" size="80" ng-model="lookup_code_detail.codeDetail" />
            </td>
            <td nowrap="nowrap" align="center">
                <input type="checkbox" name="codeLookupBean[0].active"
                ng-model="lookup_code_detail.active" />
            </td>
        </TR>
    </TBODY>
</TABLE>

<HR width="100%">
<table>
    <tr>
        <td>
            <INPUT id="codeNameInput" name="codeNameInput"
            maxLength="32" ng-model="new_lookup_code.codeName" />
        </td>
        <td>
            <INPUT id="descInput" name="descInput" maxLength="100"
            size="80" ng-model="new_lookup_code.codeDetail">
        </td>
        <td>
            <INPUT id="activeInput" name="activeInput" CHECKED type="checkbox"
                 ng-model="new_lookup_code.active" />
        </td>
        <td>
            <INPUT id="btnAddRow" class="btnz" title="Add Row" 
                ng-click="addLookupCode($event)" name="btnAddRow" value=" Add "
                type="button" />
        </td>
    </tr>
</table> 


<br /><br /><br />




 <TABLE id="tblGridBenchmarks" class="tableData" border="0" width="100%">
    <THEAD>
        <TR bgColor="#eaeaea">
            <TD class="tableTitle" noWrap>Benchmark Name</TD>
            <TD class="tableTitle" noWrap>Description</TD>
        </TR>
    </THEAD>
    <TBODY>
        <TR ng-repeat="benchmark_detail in benchmarks_details">
            <TD>{{benchmark_detail.benchmarkName}}</TD>
            <TD><INPUT name="benchmarkBean[0].benchmarkDesc"
                maxLength="255" size="120" ng-model="benchmark_detail.benchmarkDesc"></TD>
        </TR>
    </TBODY>
</TABLE> 


<HR width="100%">
<table>
    <tr>
        <td>Enter Benchmark Name:<BR> <INPUT
            id="benchmarkNameInput" name="benchmarkNameInput"
            ng-model="new_benchmark.benchmarkName" maxLength="100" size="30">
        </td>
        <td>Description:<BR> <INPUT name="benchmarkDescInput"
            ng-model="new_benchmark.benchmarkDesc" maxLength="255" size="80">
        </td>
        <td><INPUT id="btnAddRowComment" class="btnz" title="Add Row"
            ng-click="addBenchMark($event)" name="btnAddRowComment"
            value=" Add " type="button"></td>

    </tr>
</table>

Answer 1

似乎$ digest循环根本没有运行或正确运行。

尝试运行$scope.$apply()并查看它是否有效。例： http://jsfiddle.net/00d0ux1x/

有关详细信息，请参阅 http://www.sitepoint.com/understanding-angulars-apply-digest/

但是在你的情况下问题是

javascript:;更改为javascript:void(0);
如果您不想在以后使用中修改原始数组，请使用angular.copy();复制原始数组。
在取消功能中，您正在设置$scope.brokers_details并使用$scope.benchmarks_details进行查看。（也有orig_brokers_details）

查看固定解决方案 http://jsfiddle.net/00d0ux1x/3/

模型没有得到更新 - AngularJS

1 个答案: