angularjs variables in the view not changing when scope change -
i'm new angularjs. have serious problem. , have been stuck @ point last 48 hours. problem:
my view not updating when update variable in controller. here's code.
var stdata; function mainctrl($scope,$http){ retrievedataset($scope,$http, 'http://localhost:8080/ramap-service/dataprovider?title='+$scope.title+'&year='+$scope.year); $scope.$apply($scope.changemap = function(){ var curl = 'http://localhost:8080/ramap-service/dataprovider?title='+$scope.title+'&year='+$scope.year; console.log(curl); showdialog(); retrievedataset($scope,$http,curl); }); function retrievedataset($scope,$http, curl){ $http.get(curl).success(function (data,status){ console.log(data.description); $scope.desc = data.description; loadcolors(data.results); stdata=data.results; handlekeys($scope,data.results); }).error(function(data,status){ console.log(data); }); } } function loadcolors(data){ var paths = document.getelementsbytagname('path'); for(var i=0;i<data.length;i++){ for(var j=0;j<paths.length;j++){ var path = paths[j]; if(data[i][4]===path.id){ path.style.fill=getcolor(data[i][5],data); break; } } } } function getcolor(amount, data){ var color; var segments = segmentthem(data); if(amount<=segments[1]){ color = '#ffe5e9'; }else if(amount<segments[2]){ color = '#ff657b'; }else if(amount < segments[3]){ color = '#b20019'; }else if(amount < segments[4]){ color = '#4c000b'; }else if (amount<segments[5]){ color = '#ffb1bc'; }else if (amount <segments[6]){ color = '#7e0012'; }else{ color = '#fe0024'; } return color; } function segmentthem(data){ var min = findmin(data); var max = findmax(data); var diff = max - min; var interval =diff/7; interval = math.round(interval); interval = roundspecially(interval); var amounts = new array(); for(var i=0;i<7;i++){ if(i===0){ amounts[i]=min; continue; } var prev = parseint(i)-1; amounts[i] = amounts[prev]+interval; } return amounts; } function findmin(data){ var least =number(data[0][5]); for(var i=0;i<data.length;i++){ var num = number(data[i][5]); if(num<least){ least=num; } } return least; } function findmax(data){ var max = number(data[0][5]); for(var i=0;i<data.length;i++){ var num = number(data[i][5]); if(num>max){ max=num; } } return max; } function handlekeys($scope,data){ var segments = segmentthem(data); var result = new array(); var denom = 0; if((segments[4]/1000000000)>0.99){ denom = 1000000000; }else if ((segments[4]/1000000)>0.99){ denom = 1000000; }else if((segments[4]/1000)>0.99){ denom = 1000; }else{ denom = 100; } for(var i=0; i<segments.length;i++){ result[i] = segments[i]/denom; } $scope.denom = denom; $scope.results = result; } function roundspecially(num){ num = num+''; var length = num.length-1; var re = num[0]; for(var i=0; i<length;i++){ re=re+'0'; } return number(re); } function showinfo(){ var event = window.event; var element = event.srcelement; var data = getdata(element.id); document.getelementbyid('info').innerhtml= '<b>'+data[3]+'</b>'+"<br>"+currency('n', data[5]); } function getdata(id){ var result; for(var i=0;i<stdata.length;i++){ if(id===stdata[i][4]){ result = stdata[i]; } } if(typeof result === 'undefined'){ return alert("this program has undefined values on line 224"); }else{ return result; } } function currency(ssymbol, vvalue) { vvalue = number(vvalue); var adigits = vvalue.tofixed(2).split("."); adigits[0] = adigits[0].split("").reverse().join("").replace(/(\d{3})(?=\d)/g, "$1,").split("").reverse().join(""); return ssymbol + adigits.join("."); } function showdialog(){ var el = document.getelementbyid("myoverlay"); el.style.visibility = (el.style.visibility==='hidden')?'visible':'hidden'; } and view this:
<div id="container" ng-controller="mainctrl"> <header> <img src="img/header3.png"/> </header> <aside > <h5 >about current dataset</h5> <p class="points" >title</p> {{title}} {{year}} <p class="points">description</p> {{desc}} </aside> <div id="colorcode" > <h5>map key</h5> ({{denom|currency:"n"}}) <table > <tr> <th>color</th> <th>range</th> </tr> <tr> <td style="background:#ffe5e9;"></td> <td >{{results[0]}} - {{results[1]}}</td> </tr> <tr> <td style="background:#ff657b;"></td> <td >{{results[1]}} - {{results[2]}}</td> </tr> <tr> <td style="background:#b20019"></td> <td >{{results[2]}} - {{results[3]}}</td> </tr> <tr> <td style="background:#4c000b"></td> <td>{{results[3]}} - {{results[4]}}</td> <tr> <td style="background:#ffb1bc;"></td> <td>{{results[4]}} - {{results[5]}}</td> </tr> <tr> <td style="background:#7e0012"></td> <td>{{results[5]}} - {{results[6]}}</td> </tr> <tr> <td style="background:#fe0024"></td> <td>above {{results[6]}}</td> </tr> </table> </div> <span onclick="showdialog()" id="editspan"><i class="icon-edit icon-2x"></i><input type="submit" name="button" id="button" value="change dataset"/></span> <div id="info"> </div> <div id="map"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="797" height="710" viewbox="0 0 297 210" > <style type="text/css"> .state {fill:#ff0000; stroke:white ; stroke-width:0.5; stroke-opacity:1;} </style> </svg> </div> <div id="myoverlay"> <table id="dtable"> <tr id="row"> <td id="dtd"><form id="dialogue_box"> <div class="box1"><label id="label">dataset title:</label></td> <td id="dtd"> <select ng-model="title" value="budget works dataset"> <option value="budget works dataset" id="box" >budget works dataset</option> </select></td> </tr></div> <tr> <td id="dtd"><div class="box1"><label id="label2">specify year: </td> <td id="dtd"></label><select class="first" ng-model="year" > <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select></td> </tr></div> <tr> <td id="submit"><button id="button" ng-controller="mainctrl" ng-click="changemap()"> enter</button><button id="button" onclick="showdialog()"> cancel</button></td> </tr> </form></div> </table> </div> but none of these varibles changing.
if indent code can see controller updating code in aside element , rest of page isn't within mainctrl's scope. few other tags in wrong order. template should fix problems.
<div class="container" ng-controller="mainctrl"> <aside> <h5> current dataset </h5> <p class="points"> title </p> {{ititle}} {{iyear}} <p class="points"> description </p> {{desc}} </aside> <div id="myoverlay"> <table id="dtable"> <tr id="row"> <td id="dtd"> <form id="dialogue_box"> <div class="box1"> <label id="label"> dataset title: </label> </div> </form> </td> <td id="dtd"> <select ng-model="title" value="budget works dataset"> <option value="budget works dataset" id="box"> budget works dataset </option> </select> </td> </tr> <tr> <td id="dtd"> <div class="box1"> <label id="label2"> specify year: </label> </div> </td> <td id="dtd"> </label> <select class="first" ng-model="year"> <option value="2009"> 2009 </option> <option value="2010"> 2010 </option> <option value="2011"> 2011 </option> <option value="2012"> 2012 </option> <option value="2013"> 2013 </option> </select> </td> </tr> <tr> <td id="submit"> <button id="button" ng-controller="mainctrl" ng-click="changemap()"> enter </button> <button id="button" onclick="showdialog()"> cancel </button> </td> </tr> </table> </div> </div> now there containing div ng-controller="mainctrl" tag , should update rest of template in scope.
Comments
Post a Comment