我有一个简单的页面，其中有现有项目的列表(可以修改这些项目)以及将新项目添加到现有列表的选项。
有 2 个部分，CodeLookup 和 Benchmark。两个部分的设计相同(如上所述)。
有一个链接可以将所有更改恢复到页面的初始状态。 在 JS 上，有数组，一个用于存储显示的列表，一个备份数组用于存储列表的初始状态。有一个添加函数可以将新输入的数据添加到列表中。最后有一个取消方法(链接到取消链接)，它将把列表恢复到其初始状态。这个cancel方法只是把原来的列表放到了用来显示数据的列表中。
现在，代码查找值会在第一次点击取消时恢复。但如果您在列表中再次修改并热取消，则不会发生恢复。基准测试也根本没有恢复。我在 Chrome 开发工具上设置了断点，发现该列表包含原始列表中的值，但它没有反射(reflect)在 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>
最佳答案
$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/
关于javascript - 模型没有更新 - AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27857666/