angularjs - Image is not getting updated after I edit data in ng-grid -
i having grid has button ,by clicking on button opens modal window allow user modify data present in row,the code required is
//html file <body ng-controller="myctrl"> <script type="text/ng-template" id="mymodalcontent.html"> <div class="modal-header"> <h3 class="modal-title">i'm modal!</h3> </div> <div class="modal-body" > <button>hello</button> <form> <input data-ng-model="items.name"/> <input data-ng-model="items.age"/> <input data-ng-model="items.sa"/> <button class="primary" data-ng-click="ok()">save</button> <button class="primary" data-ng-click="cancel()">cancel</button> </form> </div> </script> <div class="gridstyle" ng-grid="gridoptions"></div> </body> //js file // main.js var app = angular.module('myapp', ['nggrid','ui.bootstrap']); var celltemplate='<div class="ngcelltext" data-ng-model="row"><button data-ng-click="updateselectedrow(row,$event)">edit</button></div>' var ctrl=app.controller('myctrl', function($scope,$modal) { $scope.mydata = [{name: "moroni", age: 50,sa: 2,}, {name: "tiancum", age: 43,sa:1,}, {name: "jacob", age: 27,sa: 2,}, {name: "nephi", age: 29,sa: 4,}, {name: "enos", age: 34,sa: 1,}]; $scope.gridoptions = { data: 'mydata', enablecellselection: true, enablecelledit: true, enablerowselection: false, columndefs: [{field: 'name', displayname: 'name', enablecelledit: true}, {field:'age', displayname:'age'}, {field:'sa', displayname:'serviceaffecting', //celltemplate:'<div><img ng-src="{{row.getproperty(\'"sa"\') | imagefilter}}"></img></div>' celltemplate:'<div><img ng-src="{{row.getproperty(\'sa\') | imagefilter}}"></img></div>'}, {field:'',celltemplate:celltemplate} ] }; var dialog; $scope.updateselectedrow=function(row){ $scope.myrow=row.entity; var modalinstance = $modal.open({ templateurl: 'mymodalcontent.html', controller: modalinstancectrl, resolve: { items: function () { return row.entity; } } }); } $scope.save=function(){ console.log($modal); $modal.dismiss('cancel'); } }); var modalinstancectrl = function ($scope, $modalinstance, items) { $scope.items = items; var name=items.name; var age=items.age; var sa=items.sa; $scope.ok = function () { $modalinstance.close(); }; $scope.cancel = function () { items.name=name; items.age=age; $modalinstance.dismiss('cancel'); }; }; app.filter('imagefilter', function() { return function(sa) { if(sa===0) { return 'http://goo.gl/afomaa'; } if(sa===1) { return 'http://goo.gl/vxcnlc'; } if(sa===2) { return 'http://goo.gl/afomaa'; } if(sa===4) { return 'http://goo.gl/afomaa'; } if(sa===5) { return 'http://goo.gl/afomaa'; } return 'unknown'; }; });
when editing value image not getting updated ,cant understand why ? either should happen on clicking button image should automatically turn red,any of solutions appreciated. in adcvance.
the modal turns items.sa
string, no branches in imagefilter
match anymore because sa
compared numeric values only.
two solutions spring mind:
use number input box: <input type="number" data-ng-model="items.sa"/>
or
coerce sa
number in imagefilter
:
app.filter('imagefilter', function () { return function (sa) { sa = +sa; //coerce sa number if (sa === 0) { ....
Comments
Post a Comment