在 ng-grid 中编辑数据后图像没有更新

Question

我有一个带有按钮的网格，通过单击该按钮，它会打开一个模式 window 以允许用户修改该行中存在的数据，所需的代码是

//Html file
<body ng-controller="MyCtrl">
   <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
            <h3 class="modal-title">I'm a 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';
        };

});

当我编辑图像的值时它没有更新，不明白为什么？要么应该发生在单击该按钮时图像应自动变为红色，任何解决方案将不胜感激。提前致谢。

Answer 1

模态将 items.SA 转换为字符串，因此 imagefilter 中的分支不再匹配，因为 SA 仅与数值进行比较。

两个解决方案spring要记住：

使用数字输入框：<input type="number" data-ng-model="items.SA"/>

或

将SA强制转换为imagefilter中的数字：

app.filter('imagefilter', function () {
    return function (SA) {
        SA = +SA; //coerce SA into a number
        if (SA === 0) {
        ....

在 ng-grid 中编辑数据后图像没有更新

Image is not getting updated after I edit data in ng-grid

angularjs

ng-grid