CODEWITHSUNDEEP
javascriptangularjs
suvojit
suvojit

Reputation: 311

Model is not getting updated - AngularJS

I have a simple page where there are list of existing item (these can be modified) and option to add new items to the existing list.

There are 2 sections, CodeLookup and Benchmark. Design of both section is same ( as explained above).

There is a link which will restore all the changes back to the initial state of page. On JS , there are arrays, one for storing the list which is displayed and a backup array which stores initial state of list. There is an add function which adds newly input data to the list. Lastly there is a cancel method (linked to cancel link) which will restore the list to its initial state. This cancel method just put the original list in the list used to display data.

Now the codelookup value is restored on hit of cancel the first time. But if you modify again in the list and hot cancel, restoration doesnot happen. Also benchmark is not resored at all. I have put breakpoint on Chrome dev tool and found that the list contain the values from original list however its not reflecting on UI.

Any help in fixing this is appreciated.

Below is the code : 

<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>

Upvotes: 0

Views: 83

Answers (1)

Mior
Mior

Reputation: 831

It seems like $digest cycle was not run at all or correctly.

try to run $scope.$apply() and see if it works. example: http://jsfiddle.net/00d0ux1x/

For more information see http://www.sitepoint.com/understanding-angulars-apply-digest/

However in your case problem is

  • javascript:; change to javascript:void(0);
  • use angular.copy(); to copy original array if you don't want to modify it in later use.
  • in cancel function you are setting $scope.brokers_details and in view using $scope.benchmarks_details. (also having orig_brokers_details)

See fixed solution http://jsfiddle.net/00d0ux1x/3/

Upvotes: 1

Related Questions